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:

1
{
2
  "version": 2,
3
  "rewrites": [{ "source": "/(.*)", "destination": "/src" }],
4
  "headers": [
5
    {
6
      "source": "/src/(.*)",
7
      "headers": [
8
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
9
        { "key": "Access-Control-Allow-Origin", "value": "*" },
10
        {
11
          "key": "Access-Control-Allow-Methods",
12
          "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT"
13
        },
14
        {
15
          "key": "Access-Control-Allow-Headers",
16
          "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
17
        }
18
      ]
19
    }
20
  ]
21
}