How to allow access via CORS to multiple domains within nginx

by

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 <img src="http://example.com/img.svg>), then CORS and Access-Control-Allow-Origin aren’t required. If you’re using the crossorigin attribute for your images (such as CORS Enabled Images), or loading via JS etc then the above is needed.

Original answer to adding multiple headers with the same name in nginx (CORS references removed as they were incorrect):

You can use add_header multiple times in a given block:

location / {
  add_header Header-Name "value"; 
  add_header Header-Name "value2"; 
}

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.

Leave a Comment

tech