package.json中Proxy设置失效：React与Express连接异常求助

问题分析 #

你遇到的问题核心是React开发服务器的默认代理规则：当请求根路径/时，dev server会优先返回自身的index.html文件，不会将请求转发到配置的Express后端，因此你fetch到的是React的HTML源码而非预期的"Justin"。

快速解决方案 #

方案1：修改后端接口路径（最简单） #

无需改动代理配置，只需要给后端接口更换非根路径的路由即可：

修改Express代码：

const express = require('express')
const app = express()

let name = "Justin"

// 将根路径路由改为/api/name
app.get('/api/name', (req, res) => {
  res.send(name)
})

app.listen(40000, () => {
  console.log("Im Listening on port 40000")
})

修改React的fetch请求路径：

import './App.css';

function GetData() {
  // 对应后端新的接口路径
  fetch('/api/name')
  .then((response) => response.text())
  .then(function (data) {
    console.log(data)
  })
};

function App() {
  return (
    <div className="App">
      <button onClick={GetData}>Get Data</button>
    </div>
  );
}

export default App;

重启前后端服务后，点击按钮即可正常打印"Justin"。

方案2：保留根路径，配置代理重写规则 #

如果必须使用根路径作为后端接口，需要手动配置代理重写规则，步骤如下：

1. 安装http-proxy-middleware依赖：

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

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

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

module.exports = function(app) {
  app.use(
    '/',
    createProxyMiddleware({
      target: 'http://localhost:40000',
      changeOrigin: true,
      // 排除React自身的HTML入口请求，仅转发非HTML类型的请求到后端
      bypass: function(req, res, proxyOptions) {
        if (req.headers.accept.indexOf('html') !== -1) {
          return '/index.html';
        }
      }
    })
  );
};

3. 重启React开发服务器，此时fetch('/')会正确转发到Express后端，返回"Justin"。

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