为什么本地开发时 fetch 请求后端接口会跨域？

Code°嘉煊提问于 2026-03-13 15:08:19 阅读 4

前端

我在本地用 vite 启动前端项目（localhost:5173），调用公司测试环境的 API（比如 https://api.test.com/user），浏览器直接报 CORS 错误，说“跨源请求被阻止”。

我试过在 fetch 里加 credentials，也试过后端同事说他们已经加了 Access-Control-Allow-Origin: *，但还是不行。是我哪里没配对吗？

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

我来解答赞 1 收藏

反馈

1 条解答

司徒西西 Lv1

你这个问题很典型，先说最可能的原因：

当你设置 credentials: 'include' 的时候，Access-Control-Allow-Origin 不能是 *，必须是具体的域名。浏览器安全策略就是这样规定的，这两个配置互斥。所以你后端就算加了 *，浏览器还是会拒绝。

解决方案很简单：

如果你们的 API 允许跨域共享给所有网站用，那前端就把 credentials: 'include' 去掉，或者改成 credentials: 'same-origin'。大多数公开 API 其实不需要带 cookie，直接删掉这行就行。

如果业务上确实需要带 cookie（比如登录态），那让你后端把 Access-Control-Allow-Origin 改成你前端的具体域名，比如 http://localhost:5173，同时加上 Access-Control-Allow-Credentials: true。

还有一种情况，你后端说加了 CORS 头但还是报错，看看是不是预检请求（OPTIONS）没处理。有些后端只处理了简单请求，没处理预检，也会导致失败。

最后提醒一句，你公司测试环境的 API，域名最好配到 vite 的代理里，用 /api 这样的前缀转发到后端，这样在开发阶段就根本不存在跨域问题了，本地请求本地，不香吗？

2026-03-13 15:09