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:
- Logging in (vercel login)
- Testing the app locally (vercel dev)
- 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