CORS from issue from MERN app (deployed in vercel)

Hello guys,
Can someine help? I have a MERN application working perfectly locally. But I decided to deploy both the frontend (React vite app) and backend separately, on vercel. I am now facing issues due to the CORS (Cross-Origin-Resource-Sharing).

When running testing the app, on the browser, I have the issue of:

Access to XMLHttpRequest at 'https://cc-backend-iota.vercel.app/me' from origin 'https://connectcaju.vercel.app' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

To deploy the backend app, I just follow the normal step using vercel cli:

  1. Logging in (vercel login)
  2. Testing the app locally (vercel dev)
  3. Deploying (vercel prod)

In the vercel.json, I added this information:

{
  "version": 2,
  "rewrites": [{ "source": "/(.*)", "destination": "/src" }],
  "headers": [
    {
      "source": "/src/(.*)",
      "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"
        }
      ]
    }
  ]
}

In my index.ts , I configured the CORS as follows:

app.use(
  cors({
    origin: "https://connectcaju.vercel.app",
    credentials: false,
  })
);

On the other hand, on the frontend, I also followed the normal procedures of deploying a React vite app to vercel from a Github repository.

Can someone help me solve this issue?

Thanks.
Evariste

The problem here is you are setting CORS header for one url connectcaju.vercel.app and trying to access it from different one. You need to rely on VERCEL_ENV(1) or any dynamic approach so that headers are consistent across different environment.

  1. https://vercel.com/docs/projects/environment-variables/system-environment-variables#VERCEL_ENV

Thanks @Swarnava,
I have added all the required environment variables to the vercel deployed project, include the frontend URL.

app.use(
  cors({
    origin: process.env.FRONTEND_URL,
     credentials: true,
  })
);

Unfortunately, I still have the same problem as shown in the image below

Is there something else I need to do?

As you can see, the CORS is still missing for the required website where you are trying to make the HTTP request. I would recommend checking the source code thoroughly, deploying without cache and make sure the URL is being set properly in build time.

A post was split to a new topic: Issue with setup Cookie from MERN app (deployed in Vercel)