React+Node.js Express项目代理失效，favicon请求被转发至后端求助

我之前在开发React+Express项目时也碰到过一模一样的问题，其实原因很好理解：React开发服务器（create-react-app自带的dev server）在找不到本地静态资源时，会把请求转发到你配置的代理地址。如果你的项目public文件夹里没有favicon.ico，它就会把这个请求转去localhost:5000，而后端又没配置对应路由，自然就报错了。

下面给你几个实用的解决办法：

• 最直接的方案：添加本地favicon.ico
  把你的网站图标文件直接放到React项目根目录的public文件夹里。这样React开发服务器会直接返回这个本地文件，不会再把请求转发到后端。重启开发服务器后就能生效。

• 细粒度代理配置（推荐）
  默认的proxy字段是全局转发，灵活性不够。我们可以用http-proxy-middleware来指定只代理业务相关的请求（比如/api开头的接口），避免静态资源被误转发：

  1. 先安装依赖：

     npm install http-proxy-middleware --save-dev
     

  2. 在项目的src目录下创建setupProxy.js文件，添加以下代码：

     const { createProxyMiddleware } = require('http-proxy-middleware');
     
     module.exports = function(app) {
       // 只代理/api开头的请求到后端
       app.use(
         '/api',
         createProxyMiddleware({
           target: 'https://localhost:5000',
           changeOrigin: true,
         })
       );
     };
     

  这样只有业务接口会被转发，像favicon.ico、logo.png这类静态资源请求都会由React开发服务器自行处理。

• 后端兜底处理
  如果暂时不想调整前端配置，也可以在Express后端加一个处理/favicon.ico的路由，避免报错：

  // 方案1：返回204无内容状态，避免404错误
  app.get('/favicon.ico', (req, res) => res.status(204).send());
  
  // 方案2：返回后端存储的favicon文件（如果有的话）
  const path = require('path');
  app.get('/favicon.ico', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'favicon.ico'));
  });
  

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