前端请求后端接口总是跨域，该怎么解决？

シ毓珂提问于 2026-03-27 09:17:18 阅读 34

前端

我在本地用 http://localhost:3000 开发 React 应用，调用公司测试环境的 API（https://api.test.example.com），浏览器控制台一直报 CORS 错误。后端同事说他们已经加了 Access-Control-Allow-Origin，但还是不行，我该咋办？

我试过在 fetch 里加 credentials，也试过 proxy 配置，但开发环境下还是跨域。是不是哪里漏了？

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

我来解答赞 5 收藏

反馈

1 条解答

A. 淑霞 Lv1

CORS问题确实让人头疼，特别是开发环境。既然后端已经设置了Access-Control-Allow-Origin，我们来检查几个常见疏漏。

首先确认后端是不是只允许特定域名跨域，比如他们可能只写了allow-origin: yourdomain.com，而没有允许localhost。让他们把本地开发环境加上，可以临时设置成 * 来测试。

还有个细节容易忽略：如果用了credentials（也就是带cookie请求），需要同时设置 Access-Control-Allow-Credentials: true 和精确的 Allow-Origin 域名，不能用通配符 *。

另外你的fetch代码有个小改进空间，建议分开写：

const url = 'https://api.test.example.com/user/profile';

fetch(url, {

  method: 'GET',

  credentials: 'include'

})

.then(response => {

  if (!response.ok) throw new Error('Network response was not ok');

  return response.json();

})

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

.catch(error => console.error('Fetch error:', error));

这样更清晰，错误处理也完善了。最后提醒下，开发环境可以考虑用代理服务器转发请求来绕过跨域限制，不过治本还是要解决后端配置。记得跟后端确认下这几个点。

2026-03-27 09:18