CORS issue with localhost despite proxy

Question

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

Answer 1

In the request header add Allow-cross-origin: '*'. Also, enable cors from the backend.

NOT RECOMMENDED FOR PRODUCTION only for development purposes. Disable secure mode in chrome.

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security