'Access-Control-Allow-Origin' issue when API call made from React (Isomorphic app)

Create-React-App has a simple way to deal with this problem: add a proxy field to the package.json file as shown below

"proxy": "http://localhost:8081",

In my case I was getting the CORS error even after enabling it on server side. The issue was url. `localhost:4001/todos` I forgot to prepend the 'http'.

[To see links please register here]

//correct way

You don't have to deal with it on client side. Just need the following steps:

Step 1:

npm install cors

Step 2:

//express-server.js

...
const cors = require('cors');
app.use(cors());

Done!

This is a common issue occurs when you try to call an endpoint via your react app because react app is running on localhost:3000 and apis are on different servers.

to rectify this error install 'http-proxy-middleware'

npm i http-proxy-middleware
or
yarn add http-proxy-middleware


after installation create a ***setupProxy.js*** in your ***src*** folder

and follow below code

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {

app.use(
'/getDetails', //this is your api
createProxyMiddleware({
target:'http://10.0.0.20:9000/getDetails', //this is your whole endpoint link
changeOrigin: true,
})
);


app.use(
'/getproducts', //this is your api
createProxyMiddleware({
target:'http://10.0.0.20:9000/getproducts', //this is your whole endpoint link
changeOrigin: true,
})
);

};

you can add as many api as you want in app.use.
and then just normally call the api

axios.get('http://10.0.0.20:9680/getDetails')
for more details check below link
[Porxying API requests in Development in React JS][1]


[1]:

[To see links please register here]

Fix Without Using External Proxy or Chrome Extension
--------------------------------------------------

CORS should be enable in server side! if you can not activate it on server (for example using external API) create a middleware `React -> Middleware -> Orginal Server`.

1. Create a Node.js project (Middleware) and use below code in `app.js`.

const express = require("express");
var cors = require('cors')
const app = express();
app.use(cors());
const { createProxyMiddleware } = require('http-proxy-middleware');
app.use('/api', createProxyMiddleware({
target: 'http://localhost:8080/', //original url
changeOrigin: true,
//secure: false,
onProxyRes: function (proxyRes, req, res) {
proxyRes.headers['Access-Control-Allow-Origin'] = '*';
}
}));
app.listen(5000);

This will pass the request `http://localhost:5000/api/xxx` to original server (for example `http://localhost:8080/api/xxx`), and returns the result to client.

2. Change client (React) to call proxy and get data without CORS error (you only need to change the port in url):

axios.get('http://localhost:5000/api/xxx', //proxy uri
{
headers: {
authorization: ' xxxxxxxxxx' ,
'Content-Type': 'application/json'
}
}).then(function (response) {
console.log(response);
});

3. run node project `node app.js` and react project `npm start`.

Use the google Chrome Extension called [Allow-Control-Allow-Origin: *][1]. It modifies the CORS headers on the fly in your application.

[1]:

[To see links please register here]

Add proxy to package.json file and keep the remaining part of url in the fetch itself.

eg.,

In package.json file,
"proxy" : "https://www.google.com", //add your own website link

In App.js file
const response = await fetch(./...(as per your own))

use below after private property in package.json.

"proxy": "http://localhost:5000",

The Key is `proxy` and the value is your server URL

AND other thing is Chrome does not support localhost to go through the `Access-Control-Allow-Origin`
[chrome isse cors][1]


[1]:

[To see links please register here]

OR

If you use Express
please add routes after use cors

app.use(cors());
app.use('/posts', postRoutes);

add this to your `server.js` in your express app

const cors=require("cors");
const corsOptions ={
origin:'*',
credentials:true, //access-control-allow-credentials:true
optionSuccessStatus:200,
}

app.use(cors(corsOptions))

make sure to run `npm install cors`

I fixed the same problem by simply installing "cors" in my server folder. I used express to create an api and tried to send get request to the api but it did not work without "cors".