CORS issue with Netlify Functions

Hi there. I’m having a CORS issue on localhost (not with Postman, but when I try to send a localhost request through the browser) which I’ve looked for solutions for online without finding a response.

The issue is that I’m getting:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8888/api/post. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 204.

When I try sending a request from the browser. I tried debugging this issue for hours (trying to check if the request method is OPTIONS in a HTTP request and other things), but I haven’t come up with a working solution.

Here is the current state of the code:

  if (req.method === "POST") {
    const res = ctx.json({ message: "you posted!" });
    res.headers.append("Allow-Access-Control-Origin", "*");
    res.headers.append("Access-Control-Allow-Origin", "*");
    res.headers.append("Access-Control-Allow-Origin", "*");
    res.headers.append("Access-Control-Allow-Headers", "Content-Type");
    res.headers.append("Access-Control-Allow-Methods", "GET, POST, OPTIONS");

    return res;
  }
};`

I would appreciate any help.

I just randomly fixed it after spending a couple of days.

Here’s my new code…


export default async (req, ctx) => {
  if (req.method === "POST") {
    // processing...
    return response;
  } else if (req.method === "OPTIONS") {
    const res = new Response();

    res.headers.set("Access-Control-Allow-Origin", "*");
    res.headers.append("Access-Control-Allow-Headers", "*");
    res.headers.append("Access-Control-Allow-Methods", "*");

    return res;
  }
};

The issue was that I had previously set the CORS errors on both the OPTIONS and POST request, resulting in a duplicate header. I didn’t expect the browser to keep state like that.

Edit: I spoke too soon. The CORS error is gone now on localhost, but it’s still there when I deploy the app to Netlify.

For more details, here’s my _headers file (next to index.js):

/*
  Access-Control-Allow-Origin: *

And here is my netlify.toml file, at the root of the project:

[build]
  command = "npm run build"
  publish = ".next"

[functions]
  node_bundler = "esbuild"

[[plugins]]
  package = "netlify-plugin-cypress"

[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"

## Learn more about redirects here
## https://docs.netlify.com/routing/redirects/#syntax-for-the-netlify-configuration-file
## https://docs.netlify.com/routing/redirects/redirect-options/

[[redirects]]
  from = "/api/*" # simplify all calls to serverless functions
  to = "/.netlify/functions/:splat" # all function calls will go to this path
  status = 200 # ok code
  headers = { Access-Control-Allow-Origin = "*" }

Finally got it working on the Netlify.com deploy too, although slightly unsure how.

No changes to the netlify.toml or _headers file, but I do have to return the same headers on both OPTIONS and POST apparently.

export default async (req, ctx) => {
  if (req.method === "POST") {
    const res = ctx.json({ message: 'you posted!' });

    res.headers.set("Access-Control-Allow-Origin", "*");
    res.headers.append("Access-Control-Allow-Headers", "*");
    res.headers.append("Access-Control-Allow-Methods", "*");

    return res;
  } else if (req.method === "OPTIONS") {
    const res = new Response();

    res.headers.set("Access-Control-Allow-Origin", "*");
    res.headers.append("Access-Control-Allow-Headers", "*");
    res.headers.append("Access-Control-Allow-Methods", "*");

    return res;
  }
};

Glad to see this is solved now, probably an issue around the code?

All the best

Hi Gualter! Yes, that seems to be the case. Happy that these support forums exist to help users like myself.