小编let*_*two的帖子

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

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

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

CACHE MANIFEST

CACHE:
http://<host url here>/image.png
Run Code Online (Sandbox Code Playgroud)

我遇到的问题是,一旦从应用程序缓存中加载了资产,我就开始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: …
Run Code Online (Sandbox Code Playgroud)

google-chrome application-cache cross-domain cors html5-appcache

5
推荐指数
1
解决办法
1519
查看次数