From the React JS application one call the API using axios or fetch, and you get the error ” ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource”, it means CORS is disabled in the backend server, to fix this you need to enable CORS in your backend server such as Node JS, PHP Laravel, Codeigniter, etc.
If you are calling endpoints or APIs using Axios or Fetch in react js applications, and the endpoints or APIS server does not have CORS enabled, it is common to encounter this error.
Before writing this guide, We wanted to fetch and display data in react js from an API or endpoint built from Node JS, but as soon as we call the endpoint or API in react js, we discover the error “blocked by the CORS policy: No ‘Access-Control-Allow-Origin ‘ No header is present on the requested resource” in our application. And we fixed the error by passing CORS in the header in endpoints or apis.
How to Fix Cors Policy no ‘access-control-allow-origin’ in React js
Here are two solutions to fix the error blocked by Cors policy no ‘access-control-allow-origin’ header in react js:
Solution 1: Cors React js with Node JS
If you are using Express and Node js app for APIs or endpoints, simply install cors and enable its response, to fix blocked by Cors policy no ‘access-control-allow-origin’.
To run the npm install cors --save command to install the cors package in node/express backend:
npm install cors --save
After that, open your server.js or index.js and use cors like the following in it:
// server.js
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
/* server configuration here */
Solution 2: React js PHP Cors
By using php for API or endpoint with react js application, and you are getting error blocked by cors policy no ‘access-control-allow-origin’, you need to add header to php endpoint or api.
Simply add the following lines of code to your endpoint or API file to enable CORS headers in PHP endpoint requests,
header("Access-Control-Allow-Origin: http://localhost:3000");
OR
header("Access-Control-Allow-Origin: *");
Conclusion
That’s it; We hope that with this guide, your error-blocked CORS policy: No ‘Access-Control-Allow-Origin’ in React JS application has been resolved.
A developer or program has a lot of questions, If you have any question or query other than this error then you can comment in the specific comment box, or mail us at [email protected]. We will try to resolve your query and respond to you as soon as possible.
