CORS from issue from MERN app (deployed in vercel)

[musekwa (Evariste)]

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

[swarnava (Swarnava Sengupta)]

@musekwa

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

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

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

[musekwa (Evariste)]

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?

[swarnava (Swarnava Sengupta)]

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.