A GET request is being fired off instead of the POST Request I've explicitly mentioned in axios

Question

This is my login.js file which is responsible for client-side logging in functionality. My backend code is working fine as evident when I hit the api endpoint in postman and get my jwt successfully.

import axios from 'axios';
export const login = async (email, password) => {
  try {
    const res = await axios({
      method: 'POST',
      url: '/api/v1/users/login',
      data: {
        email,
        password,
      },
    });

    if (res.data.status === 'success') {
      showAlert('success', 'Logged in successfully!');
      window.setTimeout(() => {
        location.assign('/');
      }, 1500);
    }
  } catch (err) {
    showAlert('error', err.response.data.message);
  }
};

Here's my pug template which is responsible for rendering the required html form

extends base

block content
  main.main
    .login-form
      h2.heading-secondary.ma-bt-lg Log into your account
      form.form.form--login
        .form__group
          label.form__label(for='email') Email address
          input#email.form__input(type='email', name='email', placeholder='[email protected]', required)
        .form__group.ma-bt-md
          label.form__label(for='password') Password
          input#password.form__input(type='password', name='password', placeholder='••••••••', required, minlength='8')
        .form__group
          button.btn.btn--green(type='submit') Login

And here's my index.js where I'm appending eventlisteners

const loginForm = document.querySelector('.form--login');
if (loginForm)
  loginForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    login(email, password);
  });

The issue is when I went on my local host and checked in my console's network tab a GET request is being fired off when I submit the form (tap on the login button) instead of the desired POST request and the email and password are being appended to the url as query parameters even though it wasn't happening before.

I tried using chatgpt for this but all he kept circling back to was the same debugging method of console logging and I actually did. I console logged the console.log(loginForm); but nothing appeared on the console and I thought maybe the parcel-bundler was causing this issue so I uninstalled and reinstalled it but to no avail. I also am getting this error in my terminal that Can't find /bundle.js.map on this server! even though it's right there in the same directory with /bundle.js

Here's my base pug template for additional context

doctype html
html
  head
    block head
      meta(charset='UTF-8')
      meta(name='viewport' content='width=device-width, initial-scale=1.0')
      link(rel='stylesheet' href='/css/style.css')
      link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
      link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
      title Natours | #{title}

  body(data-alert=`${alert ? alert : ''}`)
    // HEADER
    include _header

    // CONTENT
    block content
      h1 This is a placeholder heading

    // FOOTER
    include _footer


    script(src='https://js.stripe.com/v3/')
    script(src='/js/bundle.js')

Answer 1

have you tried using the fetch api for the same request?