_headers / .toml / CORS

Support
1

Hello!

Does it take time for the _headers or netlify.toml file to begin using the headers in those files? I see content updates immediately, but the changes in the _headers file is not immediate.

This is the header file: api-cat/_headers at deploy · rendall/api-cat · GitHub

According to ‘playground’ it is correct.

I deployed the same headers in the netlify.toml file, as weill. Other variables in the .toml file are seen by the site, so I know that it is deploying properly.

This is the function that I am attempting to access via javascript:
https://focused-elion-17290b.netlify.com/.netlify/functions/breed/

However, accessing it using fetch gives me no love:

fetch('https://focused-elion-17290b.netlify.com/.netlify/functions/breed/',
  {method:"GET"})
  .then((result) => result.json())
 .then(json => console.log("json", json))

Access to fetch at ‘https://focused-elion-17290b.netlify.com/.netlify/functions/breed/’ from origin ‘{everywhere}’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

But it is in both the _headers file and netlify.toml

1 Like
2

Okay! I may have solved this, and I will leave this here for anyone else struggling with this.

functions appear to have different headers than rest of the site! So, functions’ headers are affected by neither the _headers file nor the netlify.toml headers section.

According to Functions overview | Netlify Docs

The callback works much like the same parameter in an AWS Lambda function. Your handler should use the callback to return either an error (as the first parameter) or a response object, such as:

{
    "isBase64Encoded": true|false,
    "statusCode": httpStatusCode,
    "headers": { "headerName": "headerValue", ... },
    "body": "..."
}

So, it is necessary to return headers along with the function!

Boom! Done.

4 Likes
3

Hi, that’s correct! You do indeed return the desired headers in your callback function. :slight_smile:

1 Like
4

I imagine this is also possible by configuring a redirect in a netlify.toml file (untested):

# netlify.toml

[[redirects]]
  from = "/api/function-name"
  to = "/.netlify/functions/function-name"
  status = 200

  [redirects.headers]
     Access-Control-Allow-Origin = "..."
5

You are a lifesaver!

Just for anyone else who wants to see an example. Here is an example of my netlify function that returns data from my mongo database.

return {
  statusCode: 200,
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(response)
}
3 Likes
6

no, sorry. You should have tested…

7

rendall, thank you kindly.

After 9 builds with increasing intensity to find where my headers were not going,
this is the answer.

Funny thing is that I was long using this in the callback, for critical headers; and yet
adding more later, got caught up in the toml and redirects doc. There ought to be
a cross-reference, or a link to both docs wherever you’re sent to find [one of the three sets of rules and ways] how to get your headers in.

1 Like
8

Thanks guys! As in 2022, it’s still a lifesaver to add a headers property to the returned object:

return {
      statusCode: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(json),
    };
1 Like