为什么本地React项目调用API会报CORS错误？

轩辕鑫丹提问于 2026-03-10 18:22:20 阅读 2

前端

我用create-react-app搭了个小项目，想调公司内网的一个测试接口，但一请求就报CORS错误。明明后端同事说已经加了允许跨域的头，可浏览器还是拦着不让发请求。

我在本地开发环境（http://localhost:3000）调用 http://192.168.1.100:8080/api/data，控制台直接报“跨源请求被阻止”。试过在fetch里加mode: ‘no-cors’，结果连请求体都发不出去，而且响应也拿不到。

useEffect(() => {
  fetch('http://192.168.1.100:8080/api/data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
  })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));
}, []);

安全策略

我来解答赞 1 收藏

反馈

1 条解答

Mr.佳宜 Lv1

这个问题很典型，后端说加了CORS头但没生效，基本就是头没加对地方或者没处理预检请求。

先说后端该怎么配：

你得让后端在响应里返回这几个头：

// 允许的源地址，生产环境建议换成具体域名

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



// 允许的方法

Access-Control-Allow-Methods: GET, POST, OPTIONS



// 允许的请求头

Access-Control-Allow-Headers: Content-Type



// 如果要带cookie之类的凭证

Access-Control-Allow-Credentials: true

关键是POST请求会先发一个OPTIONS预检请求，后端必须对OPTIONS请求也返回这些头，不然浏览器直接就把正式请求拦了。你后端同事很可能只加了Allow-Origin，没处理OPTIONS。

如果后端暂时改不了，前端本地开发有个简单办法：

在package.json里加个代理：

{

  "proxy": "http://192.168.1.100:8080"

}

然后把fetch的地址改成相对路径：

fetch('/api/data', {

  method: 'POST',

  headers: {

    'Content-Type': 'application/json'

  },

  body: JSON.stringify({ key: 'value' })

})

这样开发服务器会帮你转发请求，同源策略就不生效了。部署到线上再让后端配nginx或者后端自己加CORS头。

至于你试的no-cors：

这模式发的是"不透明"请求，请求能发出去，但浏览器不会把响应内容给你，你拿不到返回数据的。这个模式适合调用那些不需要读取响应的第三方API或者做埋点上报之类的东西，你这种情况用不上。

2026-03-10 19:10