【发布时间】: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 提供它。
非常欢迎任何建议或见解!感谢阅读。
【问题讨论】:
标签: google-chrome cross-domain cors html5-appcache application-cache