DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Sai Avinash Duddupudi
Sai Avinash Duddupudi

Posted on

Reactjs fetch API request getting blocked by CORS policy

I am able to hit an sample endpoint via fetch and display the data in the UI. But for some endpoints, the request is getting blocked by CORS policy

I also tried to add "proxy" : "endpoint_link" in package.json and also tried to add allow Access Origin in the headers section but the issue still persists

Here is the code which is working fine

This is the console log I am getting

Access to fetch at 'http://localhost:8000/header' 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.

Enter fullscreen mode Exit fullscreen mode

Please suggest how to overcome this during development as I have tried all possible ways.

Top comments (13)

Collapse
 
mfurkankaya profile image
Furkan KAYA • Edited on

If your backend api is a nodejs and express project, you can use cors package from npm. It's so easy.

Collapse
 
saiavinashiitr profile image
Sai Avinash Duddupudi Author

what if I don't have control of the backend server? Is there a way I can bypass this CORS error for development purposes in my local?

Collapse
 
mfurkankaya profile image
Furkan KAYA

There should be but I really don't know. One more thing tht i know is; if you're using a production backend (somedomain.com/api), you can proxy it like: cors-anywhere.herokuapp.com/https:...

Thread Thread
 
saiavinashiitr profile image
Sai Avinash Duddupudi Author

wow.... It worked now... Thank you so much Furkan! :)

Thread Thread
 
mfurkankaya profile image
Furkan KAYA

I'm happy it worked. :D

Thread Thread
 
saiavinashiitr profile image
Sai Avinash Duddupudi Author • Edited on

hey, sometimes https://cors-anywhere.herokuapp.com is not working... is there any other similar one that I can use in place of this which is much more reliable?
Here is the Screenshot

Thread Thread
 
mfurkankaya profile image
Furkan KAYA

Man it's been long but i couldn't see your last comment. :D You can clone corsy-anywhere project to your local. Then you can proxy it like "localhost:8080/somedomain.com/api". Corsy anywhere github repo: github.com/Rob--W/cors-anywhere

Thread Thread
 
saiavinashiitr profile image
Sai Avinash Duddupudi Author

hey, no issues.... I have now contacted the backend team and they have whitelisted my domain. so all good for now!. Thanks Furkan for new insights:)

Collapse
 
universuccess profile image
Vu Thanh Cong

Maybe it helps you! Create a chrome with disabled CORS and use it when you develop
stackoverflow.com/questions/310281....

Collapse
 
saiavinashiitr profile image
Sai Avinash Duddupudi Author

I have tried it and is good so far for development purpose in local. Thanks a lot vuthanhcong07

Collapse
 
saiavinashiitr profile image
Sai Avinash Duddupudi Author

sure.. will try it out

Collapse
 
aizuliswafaza profile image
aizuliswafaza

Maybe u can use cURL

Collapse
 
saiavinashiitr profile image
Sai Avinash Duddupudi Author

can you please give a sample example?

Find what you were looking for? Join hundreds of thousands of developers on DEV so you can:

Β 
🌚 Enable dark mode
πŸ”  Change your default font
πŸ“š Adjust your experience level to see more relevant content