Access-Control-Allow-Origin 设置了还是报跨域错误？

夏侯爱霖提问于 2026-03-02 17:35:21 阅读 4

安全

我在本地开发 React 应用时，调用公司内网的一个 API 接口，后端同事说已经加了 Access-Control-Allow-Origin: *，但我这边还是报跨域错误。我试过在 fetch 里加 credentials: ‘include’，但好像反而更糟了？

这是我的请求代码：

fetch('https://api.internal.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
  credentials: 'include'
})
.then(res => res.json())
.then(data => console.log(data));

浏览器控制台提示：「Response to preflight request doesn’t pass access control check」，这到底是前端问题还是后端没配对？

安全头配置

我来解答赞 2 收藏

反馈

1 条解答

书生シ爱丹 Lv1

这个问题我之前也踩过坑，其实是 CORS 规范里的一个细节，后端配置不完整导致的。

直接说结论：当你前端设置了 credentials: 'include' 时，后端的 Access-Control-Allow-Origin 不能用通配符 *，必须指定具体的域名。

根据 Fetch 标准规范，当请求携带凭据（cookies、HTTP认证等）时，响应头 Access-Control-Allow-Origin 不能是 *，必须是具体的源地址，同时还需要设置 Access-Control-Allow-Credentials: true。

你现在的情况是：前端要发带凭据的请求，后端却配了 *，浏览器直接拦截，preflight 请求就挂了。

解决方案有两个方向：

方案一，如果你确实需要携带 Cookie，让后端改成这样：

Access-Control-Allow-Origin: http://localhost:3000

Access-Control-Allow-Credentials: true

Access-Control-Allow-Headers: Content-Type

注意 Origin 要写你前端实际的地址，不能写 *。另外 preflight 是 OPTIONS 请求，后端得确保 OPTIONS 方法也能返回这些头，很多框架需要单独配置。

方案二，如果你其实不需要 Cookie，把前端代码里的 credentials: 'include' 删掉就行：

fetch('https://api.internal.example.com/data', {

  method: 'GET',

  headers: {

    'Content-Type': 'application/json',

  }

})

.then(res => res.json())

.then(data => console.log(data));

这样后端的 Access-Control-Allow-Origin: * 就能正常工作了。

推荐的做法是先确认这个接口是否真的需要携带 Cookie。如果是内网接口要做登录态校验，一般是需要带 Cookie 的，那就让后端按方案一改配置。如果只是普通的数据接口，用方案二更简单。

另外提醒后端同事，OPTIONS 预检请求也得返回正确的 CORS 头，不然 preflight 这关过不去。

2026-03-02 18:15