缓存的非 CORS 响应与新的 CORS 请求冲突 [英] Cached non CORS response conflicts with new CORS request

问题描述

要点:

我有一个使用标签从 s3 加载图像的页面(HTML img 标签)，我有一个使用 xmlhttprequest 的页面.标签加载在没有 CORS 标头的情况下被缓存，因此 xmlhttprequest 看到缓存的版本，检查它的标头并失败并出现跨源错误.

I have a page that uses tag loading of an image from s3 (HTML img tag) and I have a page that uses xmlhttprequest. The tag loading gets cached without the CORS headers and so the xmlhttprequest sees the cached version, checks it's headers and fails with a cross origin error.

详情:

edit:在 safari 5.1.6 和 chrome 21.0.1180.89 中均失败.在 Firefox 14 中运行良好.

edit: Fails in both safari 5.1.6 and chrome 21.0.1180.89. Works fine in Firefox 14.

使用 S3 的新 CORS，我设置了一个 CORSRule，如下所示:

Using S3's new CORS, I setup a CORSRule as so:

<CORSRule>
  <AllowedOrigin>*</AllowedOrigin>
  <AllowedMethod>GET</AllowedMethod>
  <AllowedMethod>HEAD</AllowedMethod>
  <MaxAgeSeconds>0</MaxAgeSeconds>
  <AllowedHeader>*</AllowedHeader>
</CORSRule>

如果我从 S3 请求图像而没有在请求标头中设置来源，我会在响应中返回没有任何 CORS 标头的图像.

If I request an image from S3 without setting the origin in the request headers I get back the image without any CORS headers in the response.

由于浏览器使用缓存中的非 CORS 版本，此获取的缓存和后续 CORS 请求(确实在请求标头中设置来源的请求)被拒绝.

This get's cached and subsequent CORS requests (one's that do set the origin in the request header) get rejected as the browser uses the non CORS version form the cache.

解决这个问题的最佳方法是什么?我可以设置一些东西，使非 CORS 版本永远不会被缓存吗?我应该通过将 ?some_flag 附加到请求的 url 来区分 CORS 请求吗?

What's the best way to solve this? Can I set something so the non CORS version never gets cached? Should I differentiate the CORS requests by appending a ?some_flag to the url of the request?

理想情况下，即使请求不包含origin"，我也会让 S3 始终发回所需的 CORS 标头.

Ideally I'd have S3 ALWAYS send back the needed CORS headers even if the request doesn't contain "origin".

推荐答案

我遇到了同样的问题.正如@monsur 所说，问题在于 S3 没有设置Vary: Origin"标题，即使它应该设置.不幸的是，据我所知，没有办法让 S3 发送该标头.但是，当您需要 CORS 时，您可以通过向请求添加查询字符串参数来解决此问题，例如 ?origin=example.com.查询字符串强制浏览器不使用缓存的资源.

I ran into the same problem. As @monsur said, the problem is that S3 doesn't set teh "Vary: Origin" header, even though it should. Unfortunately, as far as I know there is no way to get S3 to send that header. However, you can work around this by adding a query string paramater to the request such as ?origin=example.com when you need CORS. The query string forces the browser not to use the cached resource.

理想情况下，当 CORS 启用时，cloudfront 和 S3 会发送 Vary:Origin 标头，并且/或者 Webkit 会隐式更改 Origin 标头，我认为 Firefox 会这样做，因为它没有这个问题.

Ideally, cloudfront and S3 would send the Vary:Origin header when CORS is enabled and/or Webkit would implicitly vary on the Origin header, which I assume Firefox does since it doesn't have this problem.

这篇关于缓存的非 CORS 响应与新的 CORS 请求冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！