CORS issue with Netlify Functions

Support
1

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.

2

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 = "*" }
3

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;
  }
};
4

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

All the best

5

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

6

I had a CORS issue with my Netlify function. It turned out that the problem wasn’t in the CORS section of my function at all. I had some malformed data and that caused a simple runtime error. The problem was the function not completing properly, but it resulted on the front end by replying to my fetch with a CORS error. Folks should know that it is not just bad CORS headers that can cause this type of issue.

1 Like
7

Hi ctulocal1, I just created my account to thank you for saving my life :raised_hands:

1 Like