为什么本地开发时Ajax请求后端接口会报CORS错误？

西门静云提问于 2026-02-23 20:01:21 阅读 38

前端

我在本地用 http://localhost:3000 启动了一个React项目，调用公司测试环境的API（比如 https://api.test.com/user），浏览器控制台一直报CORS错误，说“跨源请求被阻止”。

我试过在请求头里加 Access-Control-Allow-Origin: *，但好像没用，还是被拦截。后端同事说他们已经配了CORS，但我在前端还是拿不到数据，到底该怎么解决？

fetch('https://api.test.com/user', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*'
  }
})
.then(res => res.json())
.then(data => console.log(data))

Ajax请求 CORS跨域

我来解答赞 4 收藏

反馈

1 条解答

宇文利娇 Lv1

当时我也卡在这，折腾半天才发现自己犯了个低级错误——你把 CORS 的响应头加到请求头里了，这完全反了啊！

CORS 的关键不是前端发请求时加什么头，而是后端响应里必须带上正确的 CORS 响应头，比如：

- Access-Control-Allow-Origin: http://localhost:3000（推荐指定具体域名，别用 *，尤其带 cookie 时）
- Access-Control-Allow-Credentials: true（如果你的请求需要带 cookie 或凭证）
- 如果是预检请求（比如发了自定义 header 或非简单方法），还得支持 OPTIONS 请求，并返回对应头

你这个请求里加了 Access-Control-Allow-Origin: * 到请求头里，浏览器压根不看这个字段，它只认后端响应头里有没有。

先让后端确认：用 curl 或 Postman 直接请求 https://api.test.com/user，看响应头里有没有 Access-Control-Allow-Origin，比如：

curl -I https://api.test.com/user

如果响应里没有，那就是后端配置没生效——常见问题有：
- 配置的是开发环境，但测试环境没同步
- 用了反向代理（比如 nginx），CORS 头被代理层覆盖了
- 框架的 CORS 插件没开（比如 Express 用 cors 中间件，但没加到路由前）

如果你前端实在等不及后端改，可以本地起个代理（比如 React 的 package.json 里配 "proxy": "https://api.test.com"），然后请求就写 /user，这样走的是同源代理，不会触发 CORS。但记得别用在生产环境，这纯属开发时的权宜之计。

另外你代码里那个请求头写法是错的，删掉那行 Access-Control-Allow-Origin，前端别乱加这个头，它不是给前端用的。

2026-02-23 20:03