Create React App 如何配置代理解决跨域问题？

开发者俊轶提问于 2026-02-25 03:23:18 阅读 29

框架

我在用 Create React App 开发时，调后端接口一直报跨域错误。本地开发地址是 http://localhost:3000，而 API 地址是 http://localhost:8080/api，试过在 package.json 里加 “proxy” 字段，但好像没生效，请求还是被浏览器拦了。

我这样配置的：

{
  "name": "my-app",
  "proxy": "http://localhost:8080",
  "version": "0.1.0"
}

是不是哪里弄错了？还是现在 CRA 不支持这种写法了？

我来解答赞 4 收藏

反馈

1 条解答

书生シ子沐 Lv1

你这个配置写法本身没问题，但有几个关键点容易踩坑，我来帮你捋一捋。

首先确认下你请求的 URL 是不是写成了 /api/xxx 这种相对路径？如果是绝对路径比如 http://localhost:8080/api/xxx，那代理肯定不生效，因为代理只对相对路径的请求起作用。

然后是 proxy 的配置位置，必须放在 package.json 的根层级，你这个写法是对的，但要注意 JSON 格式别有多余逗号，或者被注释干扰。

不过有个隐藏坑：CRA 的 proxy 是通过 webpack-dev-server 实现的，只在 development 模式下生效，而且必须通过 npm start 启动项目，如果你用的是 npm run build 后再用其他方式启动，那代理完全没用。

另外如果你用了 http-proxy-middleware 自定义代理，或者项目里有 src/setupProxy.js 文件，那 package.json 里的 proxy 会被覆盖，得改 setupProxy.js 里配置。

举个最稳的写法，你试试：

先删掉 setupProxy.js（如果存在），然后 package.json 保持这样：

{

  "name": "my-app",

  "proxy": "http://localhost:8080",

  "version": "0.1.0"

}

请求的时候必须写成 fetch('/api/users') 这种相对路径，不要带协议和域名。

最后重启一下开发服务器：npm stop 再 npm start，有时候热更新不生效。

如果还是不行，八成是你请求的路径写错了，或者用了 fetch 的第三个参数（比如 mode: 'no-cors' 这种会直接让代理失效），JS 里这种细节很容易栽跟头。

2026-02-25 04:03