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?

@humanbean Thanks, the answer on the link resolved the issue. — Sahil Silare
– Sahil Silare, Commented Oct 1, 2019 at 6:53

thortsx · Accepted Answer · 2019-10-01 06:49:30Z

2

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

answered Oct 1, 2019 at 6:49

thortsx

2,2802 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem fetching API data using React/JSX

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related