I have an application that wants to download and process images. The browser requires that the image is either from the same source as the application, or that the image response allows access to the cross-start. My images are submitted via CDN (AWS S3) and they are configured to provide the correct response headers Access-Control-Allow-Originwhen requested with the expected header 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
This will work fine, except for my application there is also an additional requirement for it to work offline. To accomplish this, I list my CDN resource URLs in the application cache manifest:
CACHE MANIFEST
CACHE:
http://<host url here>/image.png
, , , appcache 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.
! .