React应用配置package.json代理后axios请求无法走代理问题

核心问题原因 #

你当前代理失效的根本原因是Create React App 内置的简易代理规则不支持带路径的目标地址，你配置的"proxy": "http://localhost:8800/api/v1"携带了/api/v1路径后缀，不符合简易代理的配置要求，所以代理逻辑根本没有被触发，删除依赖重装的操作对这个问题无效。

可选修复方案 #

方案1：使用简易代理配置（改动最小） #

按照CRA简易代理的规则调整配置即可：

• 修改package.json中的proxy字段，只保留协议+域名+端口，删除所有路径后缀：

"proxy": "http://localhost:8800"

• 调整axios请求路径，补全接口前缀：

// 原请求是/auth/login，补上/api/v1前缀
const res = await axios.post("/api/v1/auth/login", credentials);

• 完全终止当前运行的npm start进程，重新执行启动命令（热更新不会加载代理配置改动，必须冷重启），代理即可正常生效。

方案2：自定义代理规则（无需修改现有请求代码） #

如果你不想改动现有请求路径（希望请求写/auth/login时自动转发到http://localhost:8800/api/v1/auth/login），可以使用CRA支持的自定义代理配置文件实现：

• 在项目src目录下新建名为setupProxy.js的文件（文件名和存放位置不能修改，CRA会自动识别加载该文件）
• 在文件中写入以下配置：

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

module.exports = function(app) {
  app.use(
    // 匹配需要走代理的请求路径规则，多个路径可以传数组，例如['/auth', '/user', '/order']
    '/auth',
    createProxyMiddleware({
      target: 'http://localhost:8800',
      changeOrigin: true,
      onProxyReq(proxyReq) {
        // 给代理请求自动拼接/api/v1前缀
        proxyReq.path = `/api/v1${proxyReq.path}`;
      }
    })
  );
};

• 冷重启开发服务，原有axios请求代码不需要做任何修改，代理即可正常工作。

避坑提示 #

• package.json中的简易proxy配置仅支持配置根级服务地址，不能携带任何子路径，只要带路径必然不生效，这是CRA的内置规则限制。
• 所有代理配置改动后必须冷重启开发服务，热更新不会重载代理配置。
• 检查axios是否配置了全局baseURL，如果配置了非相对路径的baseURL，会导致请求不经过本地开发服务的代理层，需要删除相关配置，保证请求URL是以/开头的相对路径。

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