Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response

Support
,
1

My netlify function has these headers set up:

  const headers = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': 'Access-Control-Allow-Headers, Content-Type, Authorization',
    'Access-Control-Allow-Methods': '*',
    "Content-Type": "application/json"
  };

  return { 
    statusCode: 200, 
    headers: headers, 
  }

TOML file

[build]
  functions = "functions"

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = "/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"
    Access-Control-Allow-Headers = "Content-Type, Authorization"
    Access-Control-Allow-Methods = "GET, POST, PUT, DELETE,OPTIONS"
    Content-Type= "application/json"

But I still get this goddamn error:

Access to XMLHttpRequest at 'https://XXXX' from origin 'https://XXX' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

How hard it should be to configure CORS… :confused:

P.S. I’m sending a JSON request

2

Ok, looks like the problem is that in pre-flight the netlify returns “text/plain; charset=utf-8”

3

What worked for me is to add this code at the beginning of my function:

  callback(null, {
    statusCode: 200,
    body: "Hello, world!",
    headers: {
      "access-control-allow-origin": "*",
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
      'Access-Control-Allow-Methods': '*',
    },
  });
1 Like
4

Hey there, @Ablomis :wave:

Thanks so much for coming back and sharing your solution. This will definitely be beneficial for future Forums members who encounter something similar.

Happy building :rocket: