Problem fetching API data using React/JSX

Question

I am working on a small React project and wanted to fetch the data from the Fortnite API. I have this as a function to fetch upcoming items,

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

But I'm getting this as output,

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

How can I fix this problem?

look into this [link](https://stackoverflow.com/questions/36292537/what-is-an-opaque-response-and-what-purpose-does-it-serve) — humanbean, Oct 01 '19 at 06:47
@humanbean Thanks, the answer on the link resolved the issue. — Sahil Silare, Oct 01 '19 at 06:53

score 2 · Accepted Answer · answered Oct 01 '19 at 06:49

As Chrome sad (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.

The API https://fortnite-public-api.theapinetwork.com/prod09/upcoming/get/ don't accept your origin http://localhost:3000.

To disable origin policy in Chrome please see this post: Disable same origin policy in Chrome

Problem fetching API data using React/JSX

1 Answers1