Fixed: Cors Policy no ‘access-control-allow-origin’ in React

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.

Recommended Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *