No 'Access-Control-Allow-Origin' header is present on the requested

Help
1

I’m extremely lost. I keep getting this CORS error even though I clearly set the origin header.

vercel.json
{
“rewrites”: [
{ “source”: “/(.*)”, “destination”: “/” }
],

“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”: “Content-Type, Authorization, Accept, X-Requested-With” }
]
}
]
}

openaiHandler.mjs
export default async function handler(req, res) {
console.log(req.method, req.url);
if (req.method === “OPTIONS”) {
res.setHeader(“Access-Control-Allow-Origin”, “http://localhost:5173”);
res.setHeader(“Access-Control-Allow-Methods”, “GET,OPTIONS,PATCH,DELETE,POST,PUT”);
res.setHeader(“Access-Control-Allow-Headers”, “Content-Type, Authorization, Accept, X-Requested-With”);
res.setHeader(“Access-Control-Allow-Credentials”, “true”);
return res.status(200).end();
}

if (req.method !== "POST") {
    return res.status(405).json({ error: "Method not allowed" });
}

// rest of code
}

and access from localhost:
const response = await axios.post(
“https://development-url-vercel-github.vercel.app/api/openaiHandler”,
{
role: role,
jobRequirements: jobRequirements,
organization: organization,
resumeText: resumeText,
},
{
headers: {
“Authorization”: Bearer ${await supabase.auth.getSession().then((res) => res.data?.session?.access_token)},
“Content-Type”: “application/json”,
},
}
);

I don’t understand why I keep getting this error even though I clearly handled it in code:

Access to XMLHttpRequest at ‘https://development-url-vercel-github.vercel.app/api/openaiHandler’ from origin ‘http://localhost:5173’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

2

Hi @cohen-maor, sorry to see that you’re facing this issue.

From the configuration it looks like you’re setting headers from the vercel.json as well as the application code. I’d request to remove the headers from vercel.json because the “key”: “Access-Control-Allow-Origin”, “value”: " will remove the header from the application response causing this error.

I hope this helps you.