Question

如果您正在查看website.com而不是www.website.com，那么在我的网站上加载SVG时遇到了一些问题。该网站位于nginx服务器上，所以我添加了这个，它解决了这个问题：

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

然而，基于我所读到的，似乎这会导致安全问题？有没有办法只指定www.website.com和website.com而不是*？我问，因为我在PHP中遇到过这个问题，看起来我需要的是nginx：

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

Answer 1

lazy上的W3 spec解释了可以通过空格分隔列表指定多个来源。但实际上，浏览器中的当前实现不太可能正确解释（例如，在撰写本文时Firefox 45失败）;总结为this comment。

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

Origin

根据需要在正则表达式中添加更多域名;如果您只想支持location / { if ($http_origin ~* "^https?://(website.com|www.website.com)$") { add_header Access-Control-Allow-Origin "$http_origin"; } }，则可以删除s?。

需要注意的是，如果您通过HTML直接在网页上包含SVG（例如http://），则不需要CORS和<img src="http://example.com/img.svg>。如果您对图片使用Access-Control-Allow-Origin属性（例如CORS Enabled Images），或通过JS加载等，则需要以上内容。

在nginx中添加多个具有相同名称的标题的原始答案（删除了CORS引用，因为它们不正确）：

您可以在给定的区块中多次使用crossorigin：

add_header

并且您的回复将包含：

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

Header-Name: value Header-Name: value2也可以包含变量，请注意，如果要将标题添加到所有响应代码（包括错误），您可能需要添加add_header参数（请参阅http://nginx.org/en/docs/http/ngx_http_headers_module.html#add_header）。

Answer 2

这是使用map的解决方案。

此设置允许您向my-domain.com上的任何子域和任何端口发出请求。

map $http_origin $allow_origin {
    ~^https?://(.*\.)?my-domain.com(:\d+)?$ $http_origin;
    # NGINX won't set empty string headers, so if no match, header is unset.
    default "";
}

server {
    listen 80 default_server;
    server_name _;
    add_header 'Access-Control-Allow-Origin' $allow_origin;
    # ...
}

http://nginx.org/en/docs/http/ngx_http_map_module.html

在NGINX的位置块中使用if时会发生一些不可预料的事情。不推荐。 https://www.nginx.com/resources/wiki/start/topics/depth/ifisevil/和https://agentzh.blogspot.com/2011/03/how-nginx-location-if-works.html

如何允许通过CORS访问SVG到nginx中的多个域

2 个答案: