如何在CRA开发服务器配置API代理以解决CORS问题？

1. 修正前端请求路径 #

配置proxy后，前端请求必须使用相对路径而非完整域名。如果当前请求的是http://localhost:80/api/xxx，要改成/api/xxx——代理会自动将该请求转发到http://localhost:80/api/xxx，避免直接跨域请求触发CORS错误。

示例修改：

// 错误写法
fetch('http://localhost:80/api/user')

// 正确写法
fetch('/api/user')

2. 排查后端301重定向原因 #

你遇到的301重定向大概率是后端路由配置导致的：比如后端期望请求带尾斜杠（/api/），但前端请求的是无尾斜杠的/api，后端会返回301让浏览器跳转到带尾斜杠的地址，此时浏览器会直接访问localhost:80/api/，再次触发跨域。

解决方式二选一：

• 修改后端路由，取消强制尾斜杠的重定向规则；
• 前端请求时统一使用带尾斜杠的路径，比如/api/user/。

3. 使用自定义代理规则（进阶方案） #

如果基础proxy配置无法处理重定向等复杂场景，用http-proxy-middleware自定义代理逻辑：

1. 安装依赖：

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

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

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:80',
      changeOrigin: true,
      followRedirects: true, // 自动跟随后端重定向，避免浏览器直接跳转
      pathRewrite: { '^/api': '/api' } // 保持路径映射，无需重写可保留
    })
  );
};

这个配置会接管所有/api开头的请求，统一转发到后端，并处理重定向问题，彻底避免跨域。

4. 后端临时配置CORS（备选） #

如果代理方案暂时无法生效，可以直接在后端开启CORS支持，允许localhost:3000的请求。以Express为例：

const cors = require('cors');
// 仅开发环境允许localhost:3000
app.use(cors({ origin: 'http://localhost:3000' }));

不过更推荐用代理方案，符合Create-React-App的开发流程。

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