使用 React/JSX 获取 API 数据时出现问题
我正在开发一个小型 React 项目,想要从 Fortnite API 中获取数据。我将其作为获取即将推出的项目的函数,
const fetchItems = async () =>{
const data = await fetch('https://fortnite-public-api.theapinetwork.com/prod09/upcoming/get/');
console.log(data);
}
但我得到的输出是,
Access to fetch at ' https://fortnite-public-api.theapinetwork.com/prod09/upcoming/get/ ' from origin ' http://localhost:3000 ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://fortnite-public-api.theapinetwork.com/prod09/upcoming/get/ with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details. fetchItems @ Shop.js:12 (anonymous) @ 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 unstable_runWithPriority @ scheduler.development.js:818 runWithPriority$2 @ react-dom.development.js:12259 flushPassiveEffects @ react-dom.development.js:25283 (anonymous) @ react-dom.development.js:25162 workLoop @ scheduler.development.js:762 flushWork @ scheduler.development.js:717 performWorkUntilDeadline @ scheduler.development.js:212
我该如何解决这个问题?
正如 Chrome 所言( https://www.chromestatus.com/feature/5629709824032768 ):
Cross-Origin Read Blocking (CORB) is an algorithm that can identify and block dubious cross-origin resource loads in web browsers before they reach the web page. CORB reduces the risk of leaking sensitive data by keeping it further from cross-origin web pages.
API https://fortnite-public-api.theapinetwork.com/prod09/upcoming/get/ 不接受 您的来源 http://localhost:3000 。
要在 Chrome 中禁用来源策略,请参阅此帖子: 在 Chrome 中禁用同源策略