CORS error when trying to log in. Anyone have an idea why?

Parse Server 📡
1

I created an express application that depends on Parse-Server. My express application already has the cors package installed. What is strange is that when I try to register on the application using the Javascript Parse SDK, everything works fine. It’s only when I try and log in, that I get the error:

Access to XMLHttpRequest at 'https://myserverurl/hermes/login' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The application itself is hosted on Heroku.

I’ve searched the web for 2 days and I haven’t been able to come up with a working solution.

Any help would be appreciated.

My front end is a ReactJS application.

My server is set up as follows:

app.use(helmet());
app.use(cors());
app.options("*", cors());

const port = process.env.PORT || 1337;

var fsAdapter = new FSFilesAdapter();

const api = new ParseServer({
  allowOrigin: "*",
  appId: "hermes",
  masterKey: process.env.MASTER_KEY,
  javascriptKey: process.env.JAVASCRIPT_KEY,
  filesAdapter: fsAdapter,
  databaseURI: process.env.DATABASE_URI,
  cloud: "./cloud/main.js",
  serverURL: process.env.SERVER_URL + ":" + port + "/hermes",
  liveQuery: {
    classNames: [
      "User",
      "Heartbeat",
      "Call",
      "Message",
      "Conversation",
      "Profile",
      "Notification",
      "Message",
    ],
  },
});

app.use("/hermes", api);

let httpServer = require("http").createServer(app);

httpServer.listen(port);

ParseServer.createLiveQueryServer(httpServer);

My package.json:

{
  "name": "hermes",
  "version": "1.0.0",
  "description": "RT server to handle messaging and more",
  "main": "server.js",
  "scripts": {
    "start": "NODE_ENV=production node src/server.js",
    "dev": "NODE_ENV=development nodemon src/server.js",
    "test": "test"
  },
  "keywords": [
    "Hermes",
    "Realtime",
  ],
  "author": "Macheza Dzabala",
  "license": "ISC",
  "dependencies": {
    "cors": "*",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "helmet": "^4.4.1",
    "parse-server": "^4.5.0"
  }
}
2

Update:

I managed to sort it out. It was no CORS error at all. If you notice, my serverURL in the
new ParseServer options object is not configured correctly.

When I sorted that out, my Parse.Cloud.beforeLogin hook was able to run properly. Therefore, the error was actually a timeout error and not the CORS error as presented in the browser console.