CORS Error Even After Whitelisting The Right Origins

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.

Image Link to Error

Access to XMLHttpRequest at 'https://api.myapp.com/api/v1/currentuser' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

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.