Vercel Dev - Response to preflight request doesn't pass access control check

106 views Asked by At

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!

0

There are 0 answers