How to fetch data from api in react?

Question

I want to fetch data from my API in react:

async componentDidMount(){
const url="https://covidensa.herokuapp.com/";
const response =await fetch(url);
const data=await response.json();
this.setState({ person:data.results,loading:false });
console.log(this.state.person)
console.log(this.state.option.option1.option2)
console.log(data.results)
}

I have this error:

Access to fetch at 'https://covidensa.herokuapp.com/' 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.

Area Chart.js:36 GET https://covidensa.herokuapp.com/ net::ERR_FAILED

Edward · Accepted Answer · 2021-06-13 17:21:34Z

The reason why you're not getting any data from your api is because CORS is blocking it. Cors stands for cross-origin resource sharing and it basically acts as security to block potentially malicious code such as scripts, etc...

The following is from the Mozilla documentation:

const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });

Notice how you only have

const response =await fetch(url);

You will need to add the parameters where mode is 'no-cors' as mentioned from your error message.

Sanket Vyawahare · Accepted Answer · 2021-06-13 17:58:43Z

0

Please use cors in your backend. If you are using Nodejs for server, do npm install cors and then import in your code and write app.use(cors()).

answered Jun 13, 2021 at 17:58

Sanket Vyawahare

1309 bronze badges

Collectives™ on Stack Overflow

How to fetch data from api in react?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related