Angular Service Worker ngsw-config.json S3/Cloudflare 图像缓存 CORS 错误

Question

在 Angular 9 应用程序中，当我将此图像缓存片段添加到 ngsw-config.json 时，出现 CORS 错误并且图像不显示。如果我删除此代码段，应用程序将正常运行(没有错误)。

Access to fetch at 'https://assets.myurl.net/images/banner.jpg' fromorigin 'https://localhost:8100' has been blocked by CORS policy: No'Access-Control-Allow-Origin' header is present on the requestedresource. If an opaque response serves your needs, set the request'smode to 'no-cors' to fetch the resource with CORS disabled.

ngsw-config.json(片段):

"assetGroups": [{
    "name": "cdn",
    "installMode": "lazy",
    "updateMode": "lazy",
    "resources": {
        "urls": [
            "https://assets.myurl.net/**"
        ]
    }
}]

图像存储在具有 CORS 配置的 AWS S3 存储桶中:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

• Cloudflare 被用作 CDN(和 DNS)。
• 应用程序是最新的 9.x 版本:@angular 9.2.1，@angular/service-worker9.1.12.
• 将 crossorigin="anonymous"添加到 img 和 picture 标签似乎没有帮助。

在 Chrome/PC 中持续重现错误的步骤:

1. 清除浏览器缓存
2. 打开浏览器私有(private)/隐身
3. 转到网站——图片显示正常
4. 点击刷新——图像不再显示——浏览器控制台出现 CORS 错误

更新

根据这篇文章 ( S3 not returning Access-Control-Allow-Origin headers? )，问题似乎是 service worker 没有在请求 header 中发送 Origin(因此 S3 不发送访问控制 header )。

Service Worker 请求(从 Chrome 控制台复制):

Request URL: https://assets.myurl.net/images/banner.jpg
Referrer Policy: strict-origin-when-cross-origin
Provisional headers are shown
Referer: https://localhost:8100/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

First of all, make sure an Origin header with every request. If no Origin header issent, S3 won't send access-control headers, as S3 deems themirrelevant (and typically, they are). A browser (for which the CORSmechanism is meant) will automatically send an Origin header whendoing cross-origin HTTP requests through XMLHTTPRequest.

基于这篇文章 (S3 - Access-Control-Allow-Origin Header)，S3 cors 脚本已更新为包括:

<AllowedMethod>HEAD</AllowedMethod>
<AllowedHeader>*</AllowedHeader>

将 crossorigin="anonymous"添加到 img 标签不会更改 service worker 请求 header 。所以这不能解决问题。

Cloudflare 缓存已被清除。

这篇晦涩的帖子 ( https://community.cloudflare.com/t/access-control-allow-origin-headers-stripped/158102/2) 包括:

If you add or change CORS configuration at your origin web server,purging the Cloudflare cache by URL does NOT update the CORS headers.

我通过添加随机查询字符串(即 banner.jpg?q=abc)缓存破坏了 banner.jpg 图像。横幅图像始终正确显示(而其他图像仍然显示 cors 错误)。 Chrome 控制台应用程序选项卡 > 缓存存储中的服务 worker 缓存显示图像已缓存。 Cloudflare 缓存配置“缓存级别”= 标准“每次查询字符串更改时都提供不同的资源”。

但是，如果我将新图片上传到 S3 banner01.jpg(即尚未被 Cloudflare 缓存)，我会在显示该图片时遇到 cors 错误。我通过上传不同的图片额外尝试了三次图像名称，但没有出现 cors 错误。有趣的是，一个小时后，即使是新图像也出现了 cors 错误。

curl 命令(未在 header 中指定 Origin)在我的本地 PC 上成功运行。响应不包含 CORS header 。例如

curl -v "https://assets.myurl.net/images/banner.jpg"

将 origin 添加到 curl 命令确实会返回 CORS header 。例如

curl -v --header "Origin: https://www.example.com" "https://assets.myurl.net/images/banner.jpg"

access-control-allow-origin: https://www.example.com
access-control-allow-methods: GET, HEAD
access-control-allow-credentials: true

更新 2

我无法解释原因，但 Chrome 现在会在 Angular Service Worker 获取响应中返回 cors header 。该请求不包含 Origin header 。

accept-ranges: bytes
access-control-allow-methods: GET, HEAD
access-control-allow-origin: *

但是，Safari 没有。所有浏览器似乎都工作正常，但 Safari 仍然显示 cors 错误。

Answer 1

转到您的 S3 存储桶。单击权限，然后单击 CORS 配置。如果您有 CORS 配置，请从此更改允许的来源:

<AllowedOrigin>*</AllowedOrigin>

至

<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>

如果您没有 CORS 配置，请添加如下配置:

<CORSConfiguration>
<CORSRule>
    <AllowedOrigin>http://*</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>