ReactJS POST请求出现AxiosError（ERR_BAD_RESPONSE）及500内部服务器错误

问题说明 #

开发ReactJS和NodeJS应用时，调用localhost:5000/user/signup路由完成用户注册，收到500内部服务器错误，怀疑是Axios数据格式或authData传递问题。

相关代码 #

认证Action文件（auth.js） #

import * as api from '../api'

export const signup=(authData,navigate)=>async(dispatch)=>{
    try {
        const response=await api.signUp(authData)
        let data=response.data;
        dispatch({type:"AUTH", data})
        navigate('/')
    } catch (error) {
        console.log(error)
    }
}

API请求文件（signUp函数） #

import axios from 'axios'

const API=axios.create({baseURL:'http://localhost:5000'})

export const signUp=(authData)=>API.post('/user/signup',authData,{headers:{"Content-Type" : "application/json"}})

表单提交触发代码 #

let data=JSON.stringify({
                name:name,
                email:email,
                password:password
            });
            dispatch(signup(data),navigate)

报错信息 #

AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}
code
: 
"ERR_BAD_RESPONSE"
config
: 
{transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
message
: 
"Request failed with status code 500"
name
: 
"AxiosError"
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response
: 
{data: {…}, status: 500, statusText: 'Internal Server Error', headers: {…}, config: {…}, …}
[[Prototype]]
: 
Error

问题分析与修复方案 #

核心问题：数据格式错误+传参方式错误 #

1. JSON序列化重复：你手动用JSON.stringify()把数据转成了JSON字符串，但Axios会自动将JS对象序列化为JSON，还会自动设置Content-Type: application/json请求头。现在Axios会把你传入的字符串再次序列化，导致后端收到的是嵌套格式的字符串，解析失败抛出500错误。
2. dispatch传参错误：dispatch(signup(data),navigate)写法不对，signup是返回函数的高阶函数，正确传参应该是dispatch(signup(data, navigate))，否则navigate参数没被正确传入。

具体修复步骤 #

1. 修改表单提交代码：去掉JSON.stringify()，直接传JS对象，同时修正dispatch传参：

const data = {
  name: name,
  email: email,
  password: password
};
dispatch(signup(data, navigate));

2. 简化API请求配置：Axios默认处理JSON序列化和请求头，删掉手动设置的headers：

import axios from 'axios'

const API=axios.create({baseURL:'http://localhost:5000'})

export const signUp=(authData)=>API.post('/user/signup', authData)

3. 检查后端解析逻辑：确保NodeJS后端添加了express.json()中间件，用来解析JSON请求体：

const express = require('express');
const app = express();

// 必须添加这个中间件才能正确解析前端传来的JSON数据
app.use(express.json());

// 注册路由示例
app.post('/user/signup', (req, res) => {
  // 通过req.body获取name、email、password
  console.log(req.body);
  // 后续业务逻辑...
});

验证修复 #

完成以上修改后，重启前后端服务，提交注册表单，后端就能正确解析请求体，避免500错误。

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