使用 React/JSX 获取 API 数据时出现问题答案

【问题标题】：Problem fetching API data using React/JSX使用 React/JSX 获取 API 数据时出现问题
【发布时间】：2020-01-30 09:49:01
【问题描述】：

我正在处理一个小型 React 项目，并希望从 Fortnite API 获取数据。我有这个函数来获取即将到来的项目，

  const fetchItems = async () =>{
    const data = await fetch('https://fortnite-public-api.theapinetwork.com/prod09/upcoming/get/');
    console.log(data);
  }

但我将其作为输出，

访问获取 'https://fortnite-public-api.theapinetwork.com/prod09/upcoming/get/' 来自原点“http://localhost:3000”已被 CORS 策略阻止：请求中不存在“Access-Control-Allow-Origin”标头资源。如果不透明的响应满足您的需求，请设置请求的模式为“no-cors”以获取禁用 CORS 的资源。

跨域读取阻塞 (CORB) 阻止了跨域响应 https://fortnite-public-api.theapinetwork.com/prod09/upcoming/get/ MIME 类型应用程序/json。看 https://www.chromestatus.com/feature/5629709824032768 了解更多细节。 fetchItems@Shop.js:12（匿名）@Shop.js:8 commitHookEffectList @ react-dom.development.js:21864 commitPassiveHookEffects @ react-dom.development.js:21897 callCallback @ react-dom.development.js:363 invokeGuardedCallbackDev @ react-dom.development.js:412 调用GuardedCallback @ react-dom.development.js:465 flushPassiveEffectsImpl @ react-dom.development.js:25316 不稳定_runWithPriority @ scheduler.development.js:818 runWithPriority$2 @ react-dom.development.js:12259 flushPassiveEffects @ react-dom.development.js:25283（匿名）@ react-dom.development.js:25162 workLoop @ scheduler.development.js:762 flushWork @ scheduler.development.js:717 performWorkUntilDeadline @ scheduler.development.js:212

我该如何解决这个问题？

【问题讨论】：

添加一个像nodejs这样的中间件并从node点击api。
看看这个link
@humanbean 谢谢，链接上的答案解决了这个问题。

标签： reactjs api jsx

【解决方案1】：

作为 Chrome 伤心 (https://www.chromestatus.com/feature/5629709824032768):

Cross-Origin Read Blocking (CORB) 是一种算法，可以识别并在之前阻止 Web 浏览器中可疑的跨域资源加载他们到达网页。 CORB 降低了敏感泄漏的风险远离跨域网页的数据。

API https://fortnite-public-api.theapinetwork.com/prod09/upcoming/get/ 不接受你的出身http://localhost:3000。

要在 Chrome 中禁用源策略，请参阅此帖子：Disable same origin policy in Chrome

【讨论】：