CORS issue: access blocked to API endpoints despite correct configuration

Question

0.00/5 (No votes)

See more:

, +

I'm encountering an issue with Cross-Origin Resource Sharing (CORS) configuration in my Express.js backend application. Despite correctly configuring CORS headers to allow access from my frontend application, I'm still facing errors indicating that access is blocked to certain API endpoints.

Problem:

When attempting to access specific API endpoints from my frontend application, I'm receiving CORS-related errors in the browser console:

Access to XMLHttpRequest at https://[BACKEND].vercel.app/api/auth/refetch' from origin 'https://[FRONTEND].vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to load resource: net::ERR_FAILED

What I have tried:

What I've Tried:

Updated CORS Configuration: I've updated my Express.js server to include CORS middleware with the appropriate configuration, allowing access from the origin of my frontend application. Here's the configuration I'm using:

JavaScript

app.use(cors({ origin: ["https://[DIFFERENT FRONTEND].vercel.app"], methods: ["POST", "GET", "PUT", "DELETE"], credentials: true, }));

Checked Server Logs: I've checked the server logs and ensured that the server is running without any errors related to CORS.

Verified CORS Headers: I've verified that the CORS headers are being sent correctly in the server's response by inspecting the response headers using browser developer tools.

Environment Variables: I've confirmed that my environment variables, especially MONGO_URL, are correctly set and that there are no issues with connecting to the database.

Updated CORS Middleware: I've tried updating the CORS middleware with different configurations, such as specifying multiple origins or removing specific methods temporarily, but the issue persists.

Request for Assistance:

Despite trying the above troubleshooting steps, I'm still unable to resolve the CORS issue, and access to certain API endpoints remains blocked. I'm seeking guidance on further steps I can take to diagnose and fix this problem.

Any help or insights would be greatly appreciated!

Additional Information: Frontend Application URL: https://[FRONTEND].vercel.app `

Backend Application URL: https://[BACKEND].vercel.app

Posted 9-Jun-24 7:42am

Areesha21

Updated 9-Jun-24 22:28pm

Richard Deeming

v2

Add a Solution

Comments

Richard Deeming 10-Jun-24 4:30am

I have removed the URLs from your question, since they could make it look like spam.

However, the original "frontend application URL" doesn't match the original URL specified in the CORS header. I'm not sure whether that was a typo in your question, or if you're actually specifying the wrong source domain in your CORS header.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Pete O'Hanlon · Answer 1 · 2024-06-09T21:05:00

If memory serves me correctly, when you are deploying a Vercel app, you need to specify the CORS configuration inside the vercel.json file. Vercel overrides the settings in Express because you can think of it as acting as the Gateway here. In other words, you aren't hitting your application, you're hitting Vercel which is rejecting your calls. It should look something like this: