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.