NGINX，ssl，CORS和Access-Control-Allow-Origin值的跨站点缓存 [英] NGINX, ssl, CORS, and caching of Access-Control-Allow-Origin value cross-site

问题描述

我正在尝试编写一个nginx配置，它将处理http和https上的两个站点，只要客户端从不访问这两个站点，它似乎工作，但如果他们这样做，则存在缓存/跨站点问题。

I am trying to write an nginx config that will handle two sites on both http and https, it seems to work as long as a client never visits both sites, but if they do there are caching/cross-site issues.

# Allow cross origin
location ~* \.(eot|svg|ttf|woff|woff2|json)$ {
    if ($http_origin ~* (https?://(admin\.)?example\.com(:[0-9]+)?)) {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
    }
}

因此，如果我加载example.com，一切正常，但是当我加载admin.example.com时，我遇到这样的问题

So if I load example.com, everything works, but then when I load admin.example.com I get issues like this

（索引）：1 XMLHttpRequest无法加载
< a href =http://origin.example.com/js/data-lib/currency.json =nofollow noreferrer> http://origin.example.com/js/data-lib/currency.json 。 'Access-Control-Allow-Origin'标头的值为'http：// example。 com'不等于提供的来源。来源'http：// admin。例子。因此，com'不允许访问。

(index):1 XMLHttpRequest cannot load http://origin.example.com/js/data-lib/currency.json. The 'Access-Control-Allow-Origin' header has a value 'http:// example . com' that is not equal to the supplied origin. Origin 'http:// admin . example . com' is therefore not allowed access.

尽管我可以说这是因为浏览器使用标头缓存了原始请求来了，现在它否认我，即使服务器的另一个请求允许它。证据是，如果我在Chrome开发者工具中检查禁用缓存，则问题永远不会发生。

As near as I can tell this is because the browser cached the original request with the header it came with, and now it's denying me even though another request from the server would allow it. The proof is if I check the Disable Cache in the Chrome Developer tools then the issue never happens.

如何解决此问题？是否可以在一个配置中执行多个域+ ssl / http，或者是否有必要根据所请求的域和协议将其拆分？

How do I solve this issue? Is it possible to do multiple domains + ssl/http all in one config, or is it necessary to split this up based on the domain and protocol being requested?

（对不起关于我的例子中的可怕空间，显然StackOverflow认为我正在尝试发布链接，当时我只是在编写示例）

(Sorry about the horrible spaces in my example, apparently StackOverflow thinks I'm trying to post links when I'm just writing examples)

推荐答案

如果您添加 Vary 响应标头，其值为 Origin ，这应该会导致任何浏览器跳过当 Origin 请求标头的值与 Origin 的值不同时，它的缓存并发出新的网络请求要求它缓存自。

If you add the Vary response header with the value Origin, that should have the effect of causing any browser to skip its cache and make a new network request when the value of the Origin request header is different from the Origin value of the request it cached from.

至少它应该在浏览器中具有符合 HTTP规范的相关部分。

At least it should have that effect in browsers to that conform to the relevant part of the HTTP spec.

所以你可以将你的nginx配置更新为这样做：

So you could update your nginx config to do this:

# Allow cross origin
location ~* \.(eot|svg|ttf|woff|woff2|json)$ {
    if ($http_origin ~* (https?://(admin\.)?example\.com(:[0-9]+)?)) {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Vary' "Origin";
    }
}

您可以在关于的MDN文章Vary 响应标题。

You can read up more in the MDN article on the Vary response header.

Vary HTTP响应标头确定如何匹配未来请求
标头以决定是否可以使用缓存响应而不是
从源服务器请求新的响应。
服务器使用它来指示在内容协商算法中选择资源的
表示时使用的标头。

The Vary HTTP response header determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server. It is used by the server to indicate which headers it used when selecting a representation of a resource in a content negotiation algorithm.

这篇关于NGINX，ssl，CORS和Access-Control-Allow-Origin值的跨站点缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！