如何允许通过CORS访问Nginx中的多个域 [英] How to allow access via CORS to multiple domains within nginx

问题描述

如果您正在查看website.com而不是www.website.com，则在将SVG加载到我的网站时遇到了一些问题。该网站位于nginx服务器上，因此我添加了此内容，它解决了该问题：

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, and it solved the issue:

location / {
  add_header Access-Control-Allow-Origin "*"; 
}

但是，根据我所读的内容，这似乎是原因安全问题？有没有办法只指定www.website.com和website.com而不是*？我问是因为我在PHP中遇到了这个问题，但这似乎是我需要的，但对于nginx：

However, based off what i've read, it seems like this is causes a security problem? Is there a way to only specify www.website.com and website.com instead of *? I ask because I came across this in PHP and it seems like what I need but for nginx:

header('Access-Control-Allow-Origin: http://www.website.com');
header('Access-Control-Allow-Origin: http://website.com');

推荐答案

W3规范在 Access-Control-Allow-Origin code>说明可以用空格分隔的列表指定多个原点。但是实际上，这不太可能被浏览器中的当前实现正确解释（例如，撰写本文时Firefox 45失败）。由此评论总结。

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.

实现您所需要的，则以下nginx代码段将检查传入的 Origin 标头并相应地调整响应：

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";
    }
}

根据需要在正则表达式中添加更多域；如果只想支持 http：// ，可以删除 s？。

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

请注意，如果您是通过HTML直接在网页上添加SVG（例如< img src = http://example.com/img.svg> ），则不需要CORS和 Access-Control-Allow-Origin 。如果您使用的是 crossorigin 属性（例如启用了CORS的图像），或通过JS等加载，则需要上述内容。

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.

添加的原始答案nginx中多个具有相同名称的标头（删除了错误的CORS引用）：

您可以使用 add_header 在给定块中多次：

You can use add_header multiple times in a given block:

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

，您的回复将包含：

Header-Name: value
Header-Name: value2

add_header 也可以使用变量，并请注意您可能想添加始终参数（请参见 http：// nginx。 org / zh-CN / docs / http / ngx_http_headers_module.html＃add_header ），如果您希望将标头添加到所有响应代码（包括错误）中。

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.

这篇关于如何允许通过CORS访问Nginx中的多个域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！