Vue.js结合Express后端用Axios发POST请求返回500内部服务器错误怎么办？

1. 修复前端代码的变量名拼写错误 #

前端addUser方法存在明确的变量引用不匹配问题：

• 代码中声明的请求体对象为newUser，但Axios传参时引用了不存在的newUsers变量
• 对应错误代码段：

const newUser = {
  name: this.name,
  password: this.password,
};
// 此处变量名错误，需修正为newUser
const response = await axios.post("http://localhost:3000/users", newUsers);

该错误会导致请求无法正确携带预期的JSON数据，后端拿到空值请求体后执行后续逻辑时抛出异常，最终返回500状态码。

2. 校验后端服务的基础配置 #

Postman可正常调通接口但前端报错，通常是跨域与请求体解析配置缺失导致，需逐项确认：

• 检查后端是否注册了cors跨域中间件：未配置跨域时，浏览器发起的跨域请求会被拦截，部分场景下错误会直接返回500，而非标准的跨域报错；Postman不受浏览器跨域规则限制，因此可正常请求
• 检查后端是否在路由注册前添加了express.json()解析中间件：缺少该配置时，后端无法将Axios发送的application/json格式请求体解析为req.body对象，访问req.body.name时会触发类型错误，抛出500；Postman可手动匹配后端支持的请求格式，因此不受该配置缺失的影响

3. 获取真实的错误信息定位问题 #

当前前端的错误捕获逻辑仅打印Axios封装的通用错误，无法看到后端返回的具体报错内容，需临时调整错误捕获逻辑，直接读取后端返回的错误详情：

catch (err) {
  // 打印后端返回的具体错误信息，替代原通用错误打印
  console.log("后端返回错误详情：", err.response?.data);
}

调整后即可通过控制台看到500错误对应的具体触发原因，无需反复猜测问题点。

4. 额外校验项 #

• 确认Axios未通过全局拦截器修改请求的Content-Type头，导致后端无法正确解析请求体
• 确认后端异步路由的错误可被正常捕获，不会将业务逻辑错误包装为无明确信息的500响应

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