缓存跨域资产时,Chrome 应用程序缓存不发送“Origin”标头

Posted

技术标签:

【中文标题】缓存跨域资产时,Chrome 应用程序缓存不发送“Origin”标头【英文标题】:Chrome Application Cache doesn't send `Origin` header when caching cross-domain assets 【发布时间】:2014-05-12 15:15:29 【问题描述】:

我有一个想要加载和操作图像的应用。浏览器要求图像与应用程序来自同一来源,或者图像响应允许跨域访问。我的图像是通过 CDN (AWS S3) 提供的,它们被配置为在使用预期的 Origin 标头请求时提供正确的 Access-Control-Allow-Origin 响应标头:

GET /image.png HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, compress
Host: <aws host url here>
Origin: localhost:5000

HTTP/1.1 200 OK
Accept-Ranges: bytes
Access-Control-Allow-Methods: GET, HEAD
Access-Control-Allow-Origin: *
Cache-Control: max-age=315360000, no-transform, public
Content-Length: 3333
Content-Type: image/png
Server: AmazonS3
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method

这可以正常工作,除了我的应用程序还具有能够离线运行的额外要求。为此,我在我的应用程序缓存清单中列出了我的 CDN 资产 URL:

CACHE MANIFEST

CACHE:
http://<host url here>/image.png

我遇到的问题是,一旦从 appcache 加载资产,我就会开始收到 Cross-origin image load denied by Cross-Origin Resource Sharing policy 错误。

我已经阅读了 Chrome is supposed to send the appcache manifest origin 以及缓存填充请求,但根据我对 chrome://net-internals 的粗略探索,这似乎不会发生在我的案例中。

这是我在发出缓存填充请求时在chrome://net-internals/#events 中看到的内容:

HTTP_TRANSACTION_SEND_REQUEST_HEADERS
--> GET /image.png HTTP/1.1
    Host: <aws host url here>
    Connection: keep-alive
    Accept-Encoding: gzip,deflate,sdch
    Accept-Language: en-US,en;q=0.8

HTTP_TRANSACTION_READ_RESPONSE_HEADERS
--> HTTP/1.1 200 OK
    Cache-Control: max-age=315360000, no-transform, public
    Accept-Ranges: bytes
    Content-Type: image/png
    Content-Length: 3333
    Server: AmazonS3

Chrome 似乎没有使用 Origin 标头发出请求,这意味着 CDN 不知道使用 CORS 标头进行响应。结果(我认为),Chrome 缓存了普通的非跨域访问响应,并从 appcache 提供它。

非常欢迎任何建议或见解!感谢阅读。

【问题讨论】:

【参考方案1】:

恐怕没有答案。 您链接到的错误未解决 - 它已存档,因为几年过去了,项目成员没有采取任何行动。 跨源应用缓存请求不包含 Origin 标头。

您可以在crbug.com 创建一个新问题,它可能会得到更多关注。但是,除非我误解了thread(请参阅第二个兼容性风险段落),否则我认为我读到 Chrome(也许还有 Safari?)是唯一支持应用程序缓存清单中跨源子资源的浏览器。 如果您将您的请求添加到应用程序缓存规范中,那么将来所有的浏览器(假设有共识和支持)都可能支持这一点。 改进非标准行为(以非标准方式)可能不是要走的路,所以我不会指望 Chrome 在没有规范更新的情况下实现您的请求。 另请注意,Application Cache 已经赢得了一些相当负面的声誉,Google 和 Mozilla 现在推动的方式是 Service Worker(在 Chrome 40 和 Opera 24 中实现,并在 Firefox 中积极开发)。

【讨论】:

感谢您的回复。我担心答案会是“没有答案”!我已经按照你的建议开了一张票:code.google.com/p/chromium/issues/…

以上是关于缓存跨域资产时,Chrome 应用程序缓存不发送“Origin”标头的主要内容,如果未能解决你的问题,请参考以下文章

ajax请求请求数据缓存问题分析以及解决方案

VueJs 部署问题:Chrome 缓存旧版本,不更新应用

怎样设置chrome不缓存文件

跨域验证cookie与缓存控制

如何在颤动中将资产图像存储在缓存中

Chrome 会忽略 ETag 标头,只使用内存缓存/磁盘缓存