Question

我正在做一个小型的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类型为application / 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 invokeGuardedCallback @   react-dom.development.js：465 flushPassiveEffectsImpl @   react-dom.development.js：25316 stable_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

如何解决此问题？

Answer 1

Chrome伤心（https://www.chromestatus.com/feature/5629709824032768）：

跨源读取阻止（CORB）是一种算法，可以识别并在之前阻止Web浏览器中可疑的跨域资源加载他们到达网页。 CORB降低了敏感泄漏的风险通过使其与跨源网页保持更远的距离来获取数据。

API https://fortnite-public-api.theapinetwork.com/prod09/upcoming/get/不接受您的来历http://localhost:3000。

要在Chrome中禁用来源政策，请参阅以下帖子：Disable same origin policy in Chrome

使用React / JSX提取API数据时出现问题

1 个答案: