How to allow access via CORS to multiple domains within nginx

Question

I was having some issues getting SVGs to load on my website if you were viewing website.com instead of www.website.com. The website is on an nginx server, so I added this, a

Answer 1

The W3 spec on Access-Control-Allow-Origin explains that multiple origins can be specified by a space-separated list. In practice, though, this is unlikely to be interpreted correctly by current implementations in browsers (eg fails for Firefox 45 at time of writing); summed up by this comment.

To implement what you need, then the following nginx snippet will check the incoming Origin header and adjust the response accordingly:

location / {
    if ($http_origin ~* "^https?://(website.com|www.website.com)$") {
        add_header Access-Control-Allow-Origin "$http_origin";
    }
}

Add more domains into the regular expression as required; the s? can be removed if you want to solely support http://.

For note, if you're including SVGs directly on a web page via HTML (eg

and your response will contain:

Header-Name: value
Header-Name: value2

add_header can also feature variables and note that you might want to add the always parameter (see http://nginx.org/en/docs/http/ngx_http_headers_module.html#add_header) if you want headers to be added to all response codes, including errors.