React前端配置proxy后使用fetch('/')无法代理至Node后端的原因解析

这其实是Create React App（CRA）内置代理的资源优先匹配规则导致的，我来给你拆解一下背后的逻辑：

1. CRA代理的核心工作机制 #

CRA的开发服务器（基于webpack-dev-server）使用http-proxy-middleware实现代理，但它的逻辑是先尝试自己处理请求，只有当请求的资源在前端找不到时，才会转发到你配置的代理地址。

2. 为什么fetch('/')会返回前端内容？ #

当你请求根路径/时，CRA的开发服务器会优先查找前端的静态资源——而React单页应用的根路径默认对应public/index.html（这是启动应用的入口文件）。服务器找到了这个文件，就直接返回给你，完全不会触发代理转发到后端的http://localhost:5000/。

3. 为什么fetch('/api')能正常工作？ #

而当你请求/api这类子路径时，前端的文件系统里没有对应的静态文件（比如没有public/api这个文件或目录），同时React的路由也不会匹配这个路径（除非你特意配置了）。这时服务器判定“前端处理不了这个请求”，就会按照你在package.json里配置的proxy，把请求转发到http://localhost:5000/api，自然就能拿到后端的数据了。

4. 如果非要让根路径走代理怎么办？ #

如果你确实需要让/请求转发到后端，可以放弃package.json里的简单proxy配置，改用自定义代理规则：

在项目的src目录下创建setupProxy.js文件，写入以下代码：

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

module.exports = function(app) {
  app.use(
    '/',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      // 排除前端必须的index.html请求，避免应用无法加载
      pathRewrite: (path, req) => {
        if (req.url === '/' && req.headers.accept.includes('text/html')) {
          return null; // 让前端处理index.html请求
        }
        return path; // 其他根路径请求转发到后端
      }
    })
  );
};

不过这里要注意：React单页应用的启动依赖根路径返回的index.html，所以必须保留这个请求的前端处理逻辑，否则你的应用会无法加载。

一般来说，更合理的做法是让后端把数据接口放在子路径下（比如/api），和前端的路由/静态资源路径区分开，这样就能完美避免这类冲突了。

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