Click here to Skip to main content
15,940,921 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Updated 9-Jun-24 22:28pm
v2
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

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:
JavaScript
{
  "version": 2,
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "*" }, 
        { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT"},
        { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
        }
      ]
    }
  ]
}
 
Share this answer
 
v2

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900