React+Express项目Axios POST请求报CORS或404错误如何解决

404错误解决方案 #

首先排查proxy配置相关问题：

• 确认"proxy": "http://localhost:9000"是写在client文件夹下的package.json中，而非根目录后端服务的package.json，这是学生最常犯的配置错误。
• 修改proxy配置后必须重启前端开发服务器，配置才会生效。
• 检查axios是否全局配置了baseURL，baseURL会覆盖proxy的转发规则，导致请求无法正确转发到9000端口。

如果上述排查后仍有问题，直接用后端配置CORS的方案彻底绕开Create React App的代理限制：

1. 后端项目根目录执行安装命令：npm install cors
2. 在server.js所有路由定义之前添加配置：

const cors = require('cors')
app.use(cors())

3. 前端axios请求改为全路径写法：

axios.post("http://localhost:9000/auth/signup", credentials)

该方案可以同时解决代理失效导致的404问题和跨域问题。

如果想要继续使用CRA的代理功能，针对新版本CRA不支持字符串proxy配置的情况，可以手动配置代理规则：

1. 在client/src目录下新建setupProxy.js文件
2. 写入以下内容：

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

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

3. 删除package.json中原有的proxy字段，重启前端开发服务器即可。

Chrome CORS错误解决方案 #

你看到的React跨域错误提示并非接口层面的跨域拦截，而是开发模式下浏览器安全策略阻止React获取跨域请求抛出的真实错误对象导致的提示，本质上是接口请求出错触发的。只要解决了上述404问题，该CORS提示会自动消失。

额外排查项 #

• 确认启动项目时同时运行了后端（9000端口）和前端（3000端口）两个服务，漏开后端服务会直接返回404。
• 检查authRouter.js中的路由配置，确认存在POST /signup路由，没有拼写、大小写错误。

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