ReactJS中Fetch调用外部API出现跨域错误如何解决？

问题场景 #

我在React项目里用Fetch调用IBAN校验API，代码如下：

fetch(`https://www.iban-test.de/api/check/${input}?authcode=${IBAN_TEST_API}`)
 .then(data => setIbanResponse(data))
 .catch(error => setIbanResponse(error));

用Hooks打印ibanResponse时，直接触发了CORS拦截提示：

从源'http://localhost:3000'访问目标API被CORS阻止，响应缺少'Access-Control-Allow-Origin'头，同时出现CORB阻止JSON类型响应的问题。

网络面板显示API返回200状态，直接在浏览器地址栏访问这个请求完全正常，但React里调用就是不行。

我试过的无效方法 #

• 手动给Fetch请求添加Access-Control-Allow-Origin请求头
• 尝试在.then里解析response.json()

这些操作都没能解决CORS和CORB的报错。

最终有效的解决方案 #

我通过配置代理解决了这个问题：

1. 在React项目根目录的package.json中添加proxy字段（如果已有就直接修改）：

   {
     "name": "your-react-app",
     "version": "0.1.0",
     "proxy": "https://www.iban-test.de"
   }
   

2. 修改Fetch请求的URL，去掉域名部分，直接写接口路径：

   fetch(`/api/check/${input}?authcode=${IBAN_TEST_API}`)
    .then(response => response.json()) // 这里别忘了解析返回的JSON数据
    .then(data => setIbanResponse(data))
    .catch(error => setIbanResponse(error));
   

3. 重启React开发服务器，请求会通过代理转发，避开浏览器的CORS拦截。

为什么代理能解决问题？ #

浏览器的CORS策略只限制前端脚本发起的跨域请求，服务器之间的请求不受这个规则约束。配置代理后，前端请求先发给本地React开发服务器，再由服务器转发到目标API，这样就不会触发浏览器的CORS检查了。

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