如何在React TypeScript项目中配置setupProxy.js解决代理不生效问题

1. 代理规则未命中 #

• 请确认setupProxy.js中配置的路径前缀和你fetch请求的路径前缀一致：
  例：如果代理配置为app.use('/api', createProxyMiddleware({...}))，你的请求必须以/api开头，写法为fetch('/api/你的接口路径')，如果请求路径为fetch('/你的接口路径')，则不会匹配到代理规则，会直接请求本地localhost。
• 禁止在fetch中写完整绝对路径：如果写为fetch('http://localhost:3000/api/xxx')这种带域名的完整路径，代理会直接跳过，必须使用相对路径。

2. 导入方式错误（版本兼容问题） #

http-proxy-middleware v1.0.0及以上版本的导入方式已变更，旧版const proxy = require('http-proxy-middleware')不再生效，必须使用以下导入方式：

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

导入错误会导致代理规则没有实际注册，所有请求都不会走代理。

3. 配置项错误 #

• target必须填写完整的协议+域名/IP+端口，不能省略http:///https://前缀。
• 必须配置changeOrigin: true，否则目标服务器会识别到请求host为localhost导致返回异常。
  完整基础配置示例：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = function(app) {
    app.use(
      '/api',
      createProxyMiddleware({
        target: 'http://你的目标服务器地址:端口',
        changeOrigin: true,
        // 如果需要去掉接口前缀的/api，加以下配置
        pathRewrite: {
          '^/api': ''
        }
      })
    );
  };
  

4. 未重启开发服务 #

setupProxy.js属于开发服务的配置，修改后**必须重启npm start/yarn start**才能生效，热更新不会加载该配置的修改。

5. 文件位置错误 #

setupProxy.js必须放在项目src根目录下，不能放在子文件夹中，否则CRA不会识别该配置文件。

6. TypeScript版本配置问题 #

如果使用setupProxy.ts代替js版本适配TypeScript模板，需要先安装对应的类型依赖，否则配置不会生效：

npm install @types/http-proxy-middleware --save-dev

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