Access-Control-Allow-Origin to multiple domains

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?

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.

1 Like

Hi @luke and @shameer-rahman

it seems my case is very similar to yours!
I have a subdomain jsonfiles.example.com containing *.json files, nothing else.

How to specify Access-Control-Allow-Origin in _headers of jsonfiles.example.com for multiple (sub)domains? I have a few (sub)domains:
staging.example.com
dev.example.com
example.com

And I want all these subdomains to use data from jsonfiles.example.com. And just using a wildcard like in Access-Control-Allow-Origin: * is too broad, would prefer to restrict access to example.com and subdomains…

It is almost 3 years after last message in this topic. Any news/progress/workarounds on this?

Hi @stargazer33 , I replied in your other thread as well :slight_smile: Could you give this a try and let us know if it helps resolve your issue?

Could you give this a try …

@audrey - what is your definition of “this”?
What should I try??

About this:

That question is the same question regardless of which hosting platform you use. In other words, that isn’t a question about Netlify. That is a question about access control headers in general. Whether or not you host the site at Netlify, it doesn’t impact the answer in either way.

Netlify’s support team does have the resources to answer questions that are not specific to Netlify. For example, if you wanted to know what a good page layout for your site was, that is a design question and not a question about Netlify. It would be the same question with any hosting but it isn’t a question about the hosting itself.

In the same way we won’t design your page layout for you, we also cannot tell you which access control headers are “best for your site”. So, we need you to tell us what the best access control headers are. If there are questions about how to add those headers at Netlify, please let us know and we will assist with that.

2 Likes

To quote the MDN Access-Control-Allow-Origin documentation

Syntax is

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: <origin>
Access-Control-Allow-Origin: null

of which for <origin>

Only a single origin can be specified.

A wildcard (*) value permits any origin and null is advised against.

A way of doing this is JavaScript is available on EggHead:

(this is a Cloudflare Workers example, but the concept is applicable anywhere.)

This means you could have an Edge Function on the /page-date/* path to check the origin.

Do note Access-Control-Allow-Origin only impacts requests from a browser. Any request from a server application can still access the data/endpoint.

1 Like

@luke @jasiqli thanks for detailed responses!
I got it, this is the way Internet works )))

Well… there is more than one workaround… will try something )))