No 'Access-Control-Allow-Origin' header is present on the requested resource for React Application

Question

I have created a React Application with Node Express Back End.But when I run the app data is not displaying and I am getting an error "Access to fetch at 'https://75f37vbl70.execute-api.us-east-1.amazonaws.com/InstanceDetails/qualys-agent-check/' 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"

This is my App.jsx file.

const routes=require('./components/Routes.js')
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({ origin: true }));
const port = process.env.PORT || 5000;

/* apps.use(
  cors({
    origin: ['*'],
    methods: ["*"],
    credentials: true // enable set cookie
  })
);

 */
/* app.options('*',cors())
// console.log that your server is up and running */
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*"); 
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

// create a GET route
/* app.get('/', (req, res) => {
  res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
}); */
app.use('/',routes)
app.listen(port, () => console.log(`Listening on port ${port}`));

Does this answer your question? [How does Access-Control-Allow-Origin header work?](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) — zero298, Sep 08 '20 at 13:39

score 2 · Accepted Answer · answered Sep 08 '20 at 13:49

2

This is not related to React. Basically you need to enable CORS in your backend code. Which means you are enabling any other server which does not have the origin same as where you have deployed your Node application to fetch the data using HTTP. Here is how you can do it if you are using Express -

Install the cors middleware.

npm i cors --save

Use it in your index.js file before specifying your routes -

const cors = require('cors');
const app = express();

app.use(cors({ origin: true }));

answered Sep 08 '20 at 13:49

rex

359
1
5

I am getting this error hen I add the code snippet to index.js ./src/index.jsx [1] Line 6:13: 'express' is not defined no-undef – Jithmi Tharika Ranatunga Sep 09 '20 at 04:10
Are you sure it is nedded to include in index.js? Can't it be app.js – Jithmi Tharika Ranatunga Sep 09 '20 at 04:12
1

Yeah, app.js or index.js wherever you are configuring your middlewares for the Express. – rex Sep 09 '20 at 04:22
I updated the code.App.js file is updated. Can you please check the above code segment and let me know what is the mistake I have done – Jithmi Tharika Ranatunga Sep 09 '20 at 09:28
1

This should work. Have you deployed the application with latest code on the AWS? You can go through the middleware docs here for any clarifications - https://expressjs.com/en/resources/middleware/cors.html – rex Sep 10 '20 at 10:06
I am deploying in localhost – Jithmi Tharika Ranatunga Sep 10 '20 at 10:47
But in question you said you are getting CORS error when you deploy on https://75f37vbl70.execute-api.us-east-1.amazonaws.com/InstanceDetails/qualys-agent-check/ – rex Sep 10 '20 at 10:50
Yes.That is the API link which I am getting data – Jithmi Tharika Ranatunga Sep 10 '20 at 12:26
You need to allow cors in that Deployed API then. – rex Sep 10 '20 at 13:24

No 'Access-Control-Allow-Origin' header is present on the requested resource for React Application

1 Answers1