React中使用fetch发起GET请求触发CORS跨域报错如何解决？

这是浏览器同源安全策略触发的跨域拦截：Steam的公开API没有给第三方前端域名开放跨域权限，所以从http://localhost:3000直接发请求会被浏览器挡住。

本地开发阶段（最快方案） #

如果你用的是create-react-app搭建的项目，直接改两处就行：

1. 打开项目根目录的package.json，添加一行配置：

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

2. 修改Games组件里的请求地址，去掉域名前缀：

// 原来的写法
// const url="https://api.steampowered.com/ISteamApps/GetAppList/v0001/";
// 修改后
const url="/ISteamApps/GetAppList/v0001/";

改完重启React开发服务，请求就会走本地开发服务自动转发，不会再报跨域错误。

生产上线阶段 #

开发用的代理只能在本地用，上线要选下面任意一种方案：

• 配置Nginx反向代理：把/ISteamApps前缀的请求全部转发到https://api.steampowered.com，同时配置跨域响应头即可
• 走自有后端转发：前端先请求自己的后端接口，后端再调用Steam的API把结果返回，后端之间调用没有跨域限制

不要用错误提示里说的mode: 'no-cors'参数，这个模式只能把请求发出去，你拿不到接口返回的任何数据，完全满足不了取游戏列表的需求。

内容的提问来源于stack exchange，提问作者Ali Sezer Yılmaz