Here is the situation. I am getting a CORS error when issuing a POST request to my serverless function, in the local dev environment. There is no problem at all between two projects that are deployed to Vercel. It is not a simple POST request, as there is a payload. I can use a simple POST request when there isn't a payload without issue, as well as GET requests. I've followed all of the steps detailed by Vercel here. I should mention that my project containing the serverless function does not use a framework, it is vanilla js.
The full error is this, "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource." That simply isn't true though, I am setting the header properly. Here is what I have in my wrapper function:
// I have a local .env file where this variable is set and I can confirm comes through in other serverless functions
const ACCESS_CONTROL_ALLOW_ORIGIN = process.env.ACCESS_CONTROL_ALLOW_ORIGIN;
export const allowCors = (func) => {
return (req, res) => {
// For the preflight request, we never actually hit this log statement
console.log(req.headers.origin);
res.setHeader('Access-Control-Allow-Credentials', true);
res.setHeader('Access-Control-Allow-Origin', ACCESS_CONTROL_ALLOW_ORIGIN);
// I tried this as well to no avail
// res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT')
res.setHeader(
'Access-Control-Allow-Headers',
'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
)
if (req.method === 'OPTIONS') {
res.status(200).end();
return;
}
return func(req, res);
};
}
This is the serverless function:
import { allowCors } from '../src/util';
const login = allowCors((request, response) => {
return response.status(200).json({
status: true
});
});
export default login;
Here is what the headers look like for the preflight request:
Accept:
*/*
Accept-Encoding:
gzip, deflate, br
Accept-Language:
en-US,en;q=0.9
Access-Control-Request-Headers:
content-type
Access-Control-Request-Method:
POST
Cache-Control:
no-cache
Connection:
keep-alive
Host:
localhost:3000
Origin:
http://localhost:5173
Pragma:
no-cache
Referer:
http://localhost:5173/
Sec-Fetch-Dest:
empty
Sec-Fetch-Mode:
cors
Sec-Fetch-Site:
same-site
User-Agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
Again, this is only an issue when making a request from the dev environment. In this case, localhost:5173 to localhost:3000. Hope that's enough to get some thoughts rolling.
Thanks for your input!