I have created a REST API for the backend of this project and am using React to make the client side of the app. I have been getting this error when I am trying to login to my app.
Access to XMLHttpRequest at ‘https://studioghiblidb.herokuapp.com/login’ from origin ‘http://localhost:1234’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
I was advised to include the local host as a proxy which I did in my client side package.json like this
"devDependencies": {
"@parcel/transformer-sass": "^2.3.2",
"process": "^0.11.10"
},
"proxy" : "http://localhost:1234/"
On the server side I was instructed to use this code to keep from cross site forgery issues. I have included the essentials as accepted origins
const cors = require('cors');
let allowedOrigins = [
'http://localhost:8080',
'http://testsite.com',
'http://localhost',
'http://localhost:1234',
'https://studioghiblidb.herokuapp.com/'
];
app.use(cors({
origin: (origin, callback) => {
if(!origin) return callback(null, true);
if(allowedOrigins.indexOf(origin) === -1){
let message = 'The CORS policy for this application does not allow found on the list of allowed origin' + origin;
return callback(new Error(message), false);
}
return callback(null, true);
}
}));
I am at a complete loss as to what is causing the CORS error to keep from giving a JWT token and logging in. I have tested in Postman and the users are there and working