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

时间:2014-04-01 17:30:25

标签: google-chrome cross-domain cors html5-appcache application-cache

我有一个想要加载和操作图像的应用。浏览器要求图像来自与应用程序相同的原点,或者图像响应允许跨源访问。我的图像通过CDN(AWS S3)提供,并且配置为在请求时使用预期的Access-Control-Allow-Origin标头提供正确的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资产网址列在我的应用程序缓存清单中:

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会缓存vanilla非跨域访问响应,并从appcache提供它。

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

1 个答案:

答案 0 :(得分:3)

恐怕没有答案。 您链接的错误未解决 - 它已存档几年以来没有项目成员的任何操作。 跨源应用程序缓存请求不包括Origin标头。

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