Im trying to fetch data from my api hosted on Vercel but it says cors error. I can fetch the data from insomnia and the same copy of the website locally just fine. The same link gives the cors error when the website went online.
Im also using Vercel to host the website.
Im using react for the website and axios to fetch.
using inspect element it shows strict-origin-when-cross-origin
Inspect Element Network Tab Section
Api vercel.json
:
{
"version": 2,
"builds": [
{
"src": "index.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/api/(.*)", // Assuming your API routes start with "/api/"
"methods": ["GET", "OPTIONS", "PATCH", "DELETE", "POST", "PUT"],
"headers": {
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,OPTIONS,PATCH,DELETE,POST,PUT",
"Access-Control-Allow-Headers": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
},
"dest": "/index.js"
},
{
"src": "/(.*)",
"dest": "/index.js"
}
]
}
Website vercel.json
:
{
"headers": [
{
"source": "/api/(.*)",
"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" }
]
}
],
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}
I tried enabling cors from api and the vercel.json
, it didnt work