MERN stack开发React代理失效 请求未转发至后端5000端口返回400错误

问题根因 #

1. 请求头配置错误：你的代码中Content-type的值写为application-json，正确的JSON请求MIME类型应为application/json（中间为斜杠而非横杠）。该错误会导致后端无法解析你提交的JSON格式请求体，直接返回400 Bad Request，这是你遇到报错的核心原因，这也解释了你直接使用完整接口地址也报错的问题。
2. 代理转发规则未正确触发：package.json中的proxy配置有几个容易忽略的生效条件，未满足时不会转发请求到5000端口：

• 配置修改后必须重启React开发服务器才会生效
• 仅对相对路径的请求生效，绝对路径请求不会走代理
• 仅在开发环境生效，生产环境打包后配置失效

解决方案 #

第一步：修正请求代码 #

axios默认会自动将JS对象序列化为JSON，且默认携带application/json请求头，你可以直接简化代码：

// 无需手动序列化请求体，也不需要手动指定Content-Type
const res = await axios.post('/api/users', newUser)
console.log(res.data)

如果需要保留显式配置，修正请求头即可：

const config = {
     headers: {
         'Content-Type': "application/json"
     }
}

const body = JSON.stringify(newUser)
const res = await axios.post('/api/users', body, config)

第二步：确认代理配置生效 #

修改完proxy字段后完全停止React开发服务器，再重新执行npm start启动项目，此时相对路径的请求就会自动转发到5000端口。

第三步（可选，兼容更高版本React）：显式配置代理中间件 #

如果上述操作后代理仍不生效，在src目录下新建setupProxy.js文件，写入如下内容：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

该配置优先级高于package.json中的proxy字段，适配所有React版本的开发环境代理需求，配置完成后重启开发服务器即可。

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