CORS configuration for making calls to subdomain

Support
,
1

I will have some javascript running on:

…that will fetch data from Netlify lambda functions served from:
api.domain.com

Will there be CORS issues that will block the fetch requests?

Is there a place to configure the functions CORS settings?

2

hi there, you might look into setting a specific header for this:

something like this:

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = "/*"

  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    Content-Security-Policy = "frame-ancestors https://www.facebook.com"

(replace URL as needed)

more information can be found here:

3

Thanks for the info @perry.

Could you describe a bit how this works? How does the header in your example result in a block?

Also, how does this relate to CORS?

4

Hi @mjgs

Yes, I believe you might face CORS issues with the subdomain. There’s no setting as such that you can toggle, but here’s what you can do.

To set custom CORS headers in your Lamda functions, you need to add them to the return statement like:

exports.handler = async () => {
  return {
    statusCode: 200,
    body: JSON.stringify('Hello world!'),
    headers: {
      'access-control-allow-origin': process.env.URL, // your CORS config here
      'cache-control': 'public, max-age=0, must-revalidate'
    }
  }
}

If this doesn’t answer your question, or if you have any additional questions, do let us know.

5

Thanks for the answer.

So based on your answers, since CORS is a feature implemented by the browser, but communicated by the server via an http header, then I can set any CORS I want by simply setting the header?

Am I understanding how this works correctly?

6

@mjgs

Yes, browser checks what CORS headers the server sends and acts accordingly. So, a lot depends on the headers you send.