React项目Fetch请求遇CORS错误：Access-Control-Allow-Origin缺失

首先纠正一个误区：你在请求头里加的Access-Control-Allow-Origin: *完全没用——这个是服务器返回给浏览器的响应头，不是前端发请求时要带的，直接删掉就行。

下面给你几个生产环境能用的解决方案：

1. 自己搭后端代理（最推荐） #

浏览器的同源策略只限制前端请求，后端请求不受限制。所以你可以搭一个简单的后端服务，作为前端和目标API的中间层：

• 前端请求自己的后端接口
• 后端帮你调用第三方API，再把结果返回给前端

举个Node.js/Express的例子：

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const PORT = 3001;

// 代理接口
app.get('/api/bet365-upcoming', async (req, res) => {
  const { league_id, sport_id, token } = req.query;
  try {
    const apiRes = await fetch(`https://api.b365api.com/v1/bet365/upcoming?league_id=${league_id}&sport_id=${sport_id}&token=${token}`);
    const data = await apiRes.json();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(PORT, () => console.log(`代理服务运行在 ${PORT} 端口`));

然后前端修改请求地址：

const response = await fetch(`http://localhost:3001/api/bet365-upcoming?league_id=${league}&sport_id=${sport.id}&token=TOKEN`);

部署的时候，把后端和前端部署到同一域名下，或者给后端配置CORS允许你的前端域名访问就行。

2. 开发环境用React内置代理（仅开发） #

如果只是本地开发调试，可以在React项目的package.json里加一行：

"proxy": "https://api.b365api.com"

然后前端请求改成相对路径：

const response = await fetch(`/v1/bet365/upcoming?league_id=${league}&sport_id=${sport.id}&token=TOKEN`);

注意：这个方法只在开发环境生效，打包上线后没用。

3. 联系API提供商开放白名单 #

如果能联系到api.b365api.com的运营方，可以请求他们把你的前端域名添加到Access-Control-Allow-Origin的白名单里，这样浏览器就不会拦截请求了。

4. 检查是否支持JSONP（不推荐） #

有些老API支持JSONP跨域，但现在大部分REST API都不支持，而且JSONP有XSS风险，实在没办法再考虑。

内容的提问来源于stack exchange，提问作者wnmarc