Access-Control-Allow-Origin to multiple domains

Support
, , , ,
#1

I’m trying to add multiple domains to the list of Access-Control-Allow-Origin in netlify.toml file. i don’t want to add Access-Control-Allow-Origin = “*” since there is a security issue. i would like to allow only a list of domains to enable cors.

[[headers]]
for = “/page-data/*.json”
[headers.values]
Access-Control-Allow-Origin = “https://domain1.com”
Content-Type = “application/json”

[[headers]]
for = “/page-data/*.json”
[headers.values]
Access-Control-Allow-Origin = “https://domain2.com”
Content-Type = “application/json”

when i do the above, only last domain (i’e https://domain2.com) is working and the first one doesn’t.
is there any way i can achieve this in netlify.toml or _header file?

#2

Hi, @shameer-rahman. There isn’t a way to make header rules specific to a domain at Netlify. The rules match the path not the domain. For the example you have given, only one of those rules will apply.

It also isn’t possible to define more than a single domain name for the Access-Control-Allow-Origin header (with the exception of the “*” option). Our header rules will allow you to add multiple domain names to the header, but browsers won’t accept those additional domain names.

You can make a “multiple domain” Access-Control-Allow-Origin header like so:

[[headers]]
  for = “/page-data/*.json”
  [headers.values]
    Access-Control-Allow-Origin = '''
    https://domain1.com,
    https://domain2.com'''
    Content-Type = “application/json”

This will add both domains comma separated but web browsers won’t properly use that header.

The only workaround for this at this time would be to deploy to multiple sites and use a different header rule for each site which matches only the custom domain for that site.

If there are other questions about this, please let us know.