Blocked by CORS policy and preflight requests

Hello,

I’m having an issue with COR’s blocking requests from the frontend to the backend. My frontend and backend has been successfully deployed, but when I tested just logging in on the app, I got the following error. I read other’s post with similar issue, but I haven’t found a solution to my specific problem.

Access to XMLHttpRequest at 'https://tcgvault-backend.onrender.com/login/loginUser' from origin 'https://tcgvault.onrender.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In my server file, I have the following CORS middleware implemented:

app.use(
  cors({
    origin: ["https://localhost:5173", "https://tcgvault.onrender.com"],
    methods: ["GET", "POST", "PUT", "DELETE"],
    credentials: true,
  })
);

// Handle preflight requests
app.options("*", cors());

If anyone has an idea of what the issue could be, please point me in the right direction.

Since you’ve suspended this service, it’s not possible to verify that the CORS headers you’ve specified are in your code are actually being published.