MERN项目中React请求Express接口返回404 Not Found问题求助

从报错日志可以看出，你的请求最终发送到了React开发服务器的3000端口而非Express服务所在的5000端口，本质是package.json中配置的proxy未生效，可按照以下步骤逐一排查解决：

• 第一步：重启React开发服务
  proxy配置属于静态配置，修改后必须完全终止当前运行的npm start/yarn start进程，再重新启动服务才会生效，开发服务的热重载功能不会加载proxy的更新。
• 第二步：校验proxy配置格式
  确保proxy字段是package.json的顶层属性，不要嵌套在scripts、dependencies等其他属性下，正确的配置结构示例如下：

{
  "name": "react-demo",
  "version": "1.0.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    // 项目依赖内容
  }
}

• 第三步：确认请求路径格式
  你当前使用的相对路径/auth/signup符合要求，不要修改为带域名的完整路径（如http://localhost:3000/auth/signup），否则proxy规则不会匹配到该请求。
• 第四步：手动配置代理（可选，针对CRA 2.0+版本）
  如果上述操作后仍未生效，可通过http-proxy-middleware手动配置代理规则：

1. 安装依赖：npm install http-proxy-middleware --save
2. 在React项目src目录下新建setupProxy.js文件，写入以下内容：

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

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

3. 配置完成后重启React开发服务即可。

你提到的星巴克公共wifi不会影响本地服务的请求，只要两个服务都运行在你本地设备的localhost地址上，公共网络不会拦截本地回环请求。

内容的提问来源于stack exchange，提问作者The silent one