[Solved] Axios request has been blocked by cors no 'Access-Control-Allow-Origin' header is present on the requested resource

Article Safiul Tarek

Problem :

Making an API call using Axios in a React Web app. However, I'm getting this error:

Axios request has been blocked by cors no 'Access-Control-Allow-Origin' header is present on the requested resource

Solution 1:

Access-Control-Allow-Origin is a response header - so in order to enable CORS - We need to add this header to the response from server. 

headers: {"Access-Control-Allow-Origin": "*"}

Solution 2:

For most cases, the better solution would be configuring the reverse proxy, so that server would be able to redirect requests from the frontend to the backend, without enabling CORS.

You can find documentation about CORS mechanism here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS


Solution 3:

Server should enable the cross origin requests, not the client. To do this, We can check this nice page with implementations and configurations for multiple platforms.

Thank you for reading the article. If you face any problems, please comment below. To learn more about react, you can check The complete React developer course w/Hooks & Redux course.