Axios指定POST请求却发送GET的登录功能异常求助

后端接口经Postman测试正常，可成功获取JWT，但前端登录功能出现异常：点击登录按钮后浏览器发送GET请求而非指定的POST请求，邮箱和密码被拼接到URL参数中。尝试打印loginForm无控制台输出，怀疑Parcel打包问题，卸载重装后无效，终端提示找不到/bundle.js.map（文件实际存在）。

相关代码 #

login.js（客户端登录逻辑） #

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);
  }
};

Pug登录表单模板 #

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='you@example.com', 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

index.js（事件监听） #

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);
  });

问题原因及解决 #

1. 事件监听未绑定成功
   打印loginForm无输出，说明DOM元素还未渲染完成时，index.js的代码就已经执行了，导致无法找到.form--login元素，浏览器默认的表单GET提交行为未被阻止。

   • 解决：将事件监听代码包裹在DOMContentLoaded事件中，确保DOM完全渲染后再执行：

     document.addEventListener('DOMContentLoaded', () => {
       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);
         });
       }
     });
     

2. Parcel打包缓存与路径问题
   终端提示找不到/bundle.js.map但文件实际存在，大概率是Parcel缓存或路径解析异常。

   • 解决：
     • 清理Parcel缓存：执行rm -rf .parcel-cache（Linux/macOS）或rd /s /q .parcel-cache（Windows）后重新打包。
     • 检查Parcel配置文件（如.parcelrc或package.json中的配置项），确认sourcemap路径设置正确。

3. 表单默认行为兜底
   可以在Pug模板的form标签上显式指定method="POST"和action="#"，作为事件监听失效时的兜底方案：

   form.form.form--login(method="POST" action="#")
   

内容的提问来源于stack exchange，提问作者Anish Jha