使用Axios发送POST请求时出现BadRequestError(请求中止)的排查

问题描述 #

使用Axios发送登录POST请求时，一直收到BadRequestError: request aborted错误，以下是前端代码片段：

import { useState } from "react";
import { BiShow, BiHide } from "react-icons/bi";
import { useDispatch} from "react-redux";
import axios from 'axios';
/* import { loginState } from "../providers/userProvider/loginReducer"; */

const Login = () => {
    const [showPassword, setShowPassword] = useState(false);
    const [loginData, setLoginData] = useState({
        email: "",
        password: ""
    })
    const loginURL = `http://localhost:8000/api/v1/users/login`;
    const dispatch = useDispatch();
    // 收集表单信息
    const handleOnchange = (e) =>{
        const {name, value} = e.target;
        setLoginData((prev) => {
            return {
                ...prev,
                [name] :value
            }
        })
    }

    // 提交登录数据到后端
    const handleSubmit = async(e) => {
        e.preventDefault();
        const {email, password} = loginData;
        if (email && password) {
            //console.log(loginData);
            try {
                axios.post(loginURL, loginData).then(function (response) {
                    console.log(response)
                }).catch(function (error) {
                    console.log(error);
                })
            } catch (error) {
                console.log(error);
            }
        }
    }
}

错误信息 #

BadRequestError: 请求已中止
    at IncomingMessage.onAborted (D:\open source contributions\I can Help\ICan-Help_Foundation\backend-APIs\node_modules\raw-body\index.js:238:10)
    at IncomingMessage.emit (node:events:513:28)
    at IncomingMessage._destroy (node:_http_incoming:224:10)
    at _destroy (node:internal/streams/destroy:109:10)
    at IncomingMessage.destroy (node:internal/streams/destroy:71:5)
    at abortIncoming (node:_http_server:754:9)
    at socketOnClose (node:_http_server:748:3)
    at Socket.emit (node:events:525:35)
    at TCP.<anonymous> (node:net:322:12)

可能原因及解决方法 #

1. 请求被后端主动中止 #

后端可能因为请求格式不合法、参数缺失或处理超时，主动断开了连接。

• 检查后端服务日志，确认是否有请求解析错误或参数校验失败的记录；
• 核对后端接口文档，确保email和password字段名与后端要求完全一致。

2. 请求格式与后端预期不匹配 #

Axios默认以application/json格式发送数据，如果后端期望的是表单格式（application/x-www-form-urlencoded），会导致解析失败进而中止请求。

• 若后端需要表单格式，安装qs库，序列化请求数据：

  import qs from 'qs';
  // ...
  const response = await axios.post(loginURL, qs.stringify(loginData));
  

• 或者手动设置请求头：

  const response = await axios.post(loginURL, loginData, {
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      }
  });
  

3. 跨域问题导致浏览器拦截请求 #

前端（localhost:3000）和后端（localhost:8000）端口不同，浏览器的CORS策略可能拦截请求，导致请求被中止。

• 在后端配置CORS，允许前端域名的跨域请求（比如用Express的cors中间件）；
• 前端使用代理转发请求：在React项目中创建src/setupProxy.js，添加以下内容：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  module.exports = function(app) {
    app.use(
      '/api',
      createProxyMiddleware({
        target: 'http://localhost:8000',
        changeOrigin: true,
      })
    );
  };
  

  之后将loginURL改为/api/v1/users/login即可。

4. Axios代码写法优化（便于排查错误） #

代码中同时混用了async/await和.then/.catch，虽然不影响功能，但可以简化写法，更清晰地捕获错误细节：

const handleSubmit = async(e) => {
    e.preventDefault();
    const {email, password} = loginData;
    if (email && password) {
        try {
            const response = await axios.post(loginURL, loginData);
            console.log(response);
        } catch (error) {
            console.error(error.response?.data || error.message);
        }
    }
}

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