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

Question

我有一个想要加载和处理图像的应用程序。浏览器要求图像要么与应用程序起源相同，要么图像响应允许跨域访问。我的图像是通过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

我遇到的问题是，一旦从应用程序缓存中加载了资产，我就开始Cross-origin image load denied by Cross-Origin Resource Sharing policy 出现错误。

我已经了解到Chrome应该与缓存填充请求一起发送appcache清单来源，但是根据我在中的粗略探索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中提供了响应。

任何建议或见识将非常欢迎！谢谢阅读。

Answer 1

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

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