I have a NodeJS backend application running on api.myapp.com and have whitelisted all the required Frontend Origins including myapp.com .

Each time I try accessing api.myapp.com with myapp.com, I get a CORS error.

When I try to access the API from the Frontend locally in development, everything works as it should but when I push to my Ubuntu VPS, suddenly it gets blocked by CORS.

If I switch my localhost development server(for the frontend application), and try connecting the the hosted server (api.myapp.com), it still gives me the same error even though it has been whitelisted.

This is the Whitelist for cors

const allowedOrigins = [
  "http://localhost:3001",
  "http://localhost:3000",
  "https://myapp.com",
];

const corsConfig = {
  origin: allowedOrigins,
  credentials: true,
  methods: "GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE",
  allowedHeaders: ["Content-Type", "Authorization"],
};

app.use(cors(corsConfig));

app.options("*", cors(corsConfig));

One thing to Note is that somehow, I only get this behaviour when I am on myapp.com/user page.
If I am on myapp.com, I can login to the app with the login modal but once I get to that page, it errors out completely and no data can be fetched.

I also tried whitelisting all Origins and it worked fine locally but wouldn’t work once I have pushed to the VPS.

Everything was working fine a few days ago but my company updated the VPS RAM capacity and that was one I recall this problem started.