Windows环境下Create React App中package.json代理请求缓慢问题

我之前帮不少开发者排查过这个问题——Windows环境下CRA的代理请求到本地Express（3001端口）慢得离谱，大多是网络解析、代理配置或者系统环境的锅，给你几个实测有效的解决方案：

1. 强制用IPv4解析localhost（最常见的元凶） #

Windows默认会优先尝试用IPv6解析localhost，但很多本地Express服务只监听IPv4的127.0.0.1，这就导致代理请求会先等IPv6连接超时，再 fallback 到IPv4，直接拖慢了几秒响应。解决方法很简单：

• 右键以管理员身份打开记事本，找到C:\Windows\System32\drivers\etc\hosts文件
• 确保这一行存在：127.0.0.1 localhost，如果有::1 localhost（IPv6的localhost），把它注释掉（前面加#）或者移到127.0.0.1 localhost的后面
• 保存后重启你的CRA开发服务器和Express后端，基本能解决80%的慢请求问题

2. 自定义CRA代理配置，优化请求参数 #

CRA默认的代理用的是http-proxy-middleware，默认配置可能不够适配Windows环境，咱们自定义一下：

• 在项目根目录创建src/setupProxy.js（CRA会自动加载这个文件，不用额外配置）
• 复制下面的代码，记得把/api换成你项目里的API前缀：

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

module.exports = function(app) {
  app.use(
    '/api', // 替换成你的实际API路径前缀
    createProxyMiddleware({
      target: 'http://127.0.0.1:3001', // 直接用IPv4地址，避免解析问题
      changeOrigin: true,
      proxyTimeout: 5000, // 设置代理超时，避免无意义等待
      timeout: 5000,
      ws: false, // 如果你的项目不用WebSocket，直接禁用它
    })
  );
};

• 重启CRA服务，代理请求的延迟会明显降低

3. 先排查后端本身的响应速度 #

有时候锅不在代理，而是你的Express后端处理慢——比如它调用外部API的时候没做缓存，或者逻辑太复杂：

• 在Express的入口文件里加个简单的日志中间件，看看每个请求的处理时间：

app.use((req, res, next) => {
  const startTime = Date.now();
  // 请求结束后打印耗时
  res.on('finish', () => {
    const duration = Date.now() - startTime;
    console.log(`[${new Date().toLocaleString()}] ${req.method} ${req.path} - ${duration}ms`);
  });
  next();
});

• 如果发现某个接口耗时超过几百毫秒，就针对性优化：比如给外部API的请求加个内存缓存（用lru-cache之类的库），或者简化后端逻辑

4. 换WSL2运行服务（终极方案） #

如果上面的方法都没搞定，试试把前后端服务都搬到WSL2（Windows子系统Linux）里运行：

• 先安装WSL2和Ubuntu（微软商店就能装），配置好环境
• 在WSL的终端里克隆项目、装依赖、启动CRA和Express
• WSL2的网络栈比原生Windows更稳定，本地代理请求的速度会快很多，我自己遇到过几次原生Windows解决不了的慢请求，换WSL直接就好了

5. 检查防火墙/杀毒软件的拦截 #

有时候Windows Defender防火墙或者第三方杀毒软件会把本地代理请求当成可疑流量，偷偷拦截或扫描，导致延迟：

• 先暂时关闭Windows Defender防火墙（测试用，之后记得打开），看看请求速度有没有提升
• 如果是杀毒软件的问题，把CRA的端口（默认3000）和Express的端口（3001）加入信任列表，或者排除项目目录的扫描

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