Help with CORS problem with Edge Functions

Support
, ,
1

Hello,
I’m trying to make an Axios request from localhost to a netlify Edge Function and I get “Origin is not allowed by Access-Control-Allow-Origin. Status code: 200” error.

I have the following netlify.toml

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

[[edge_functions]]
    function = "login"
    path = "/login"

If I test it locally by running “netlify dev”, the header is set and it works. But if I build it, it doesn’t work.

This is my netlify build: https://uilens-api.netlify.app/login

Can you help? Thank you!

2

Hey @cerpow

You’ll need to add the Access-Control-Allow-Origin header to the function return.

E.G.

export default async () => {
  return new Response("OK", {
    headers: {
      'Allow-Access-Control-Origin': '*'
    }
  })
}
1 Like
3

Awesome! That worked!

It’s actually Access-Control-Allow-Origin but worked.
How can I set the header to res.json?

Thank you!

4

Do you mean the Content-Type header?

6

I mean context, sorry, it’s actually the same:

return ctx.json(
		{ message: 'hello'},
		{
			headers: {
				'Access-Control-Allow-Origin': '*',
			},
		}
	);
7

I believe this is what you are looking for.

export default async (req, ctx) => {
  let res = ctx.json({ msg: "hello" })
  res.headers.append('Allow-Access-Control-Origin', '*')
  return res
}
2 Likes
8

Yes, thank you very much!