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

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

在'https://assets.myurl.net/images/banner.jpg“从 起源'https://localhost:8100'已被CORS策略阻止：否 “Access Control Allow Origin”标头出现在请求的服务器上 资源。如果不透明的响应满足您的需要，请设置请求的 模式设置为“无cors”，以获取禁用cors的资源

ngsw-config.json（代码段）：

图像存储在具有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>

首先，确保每个请求都有一个Origin头。如果未指定原点标头 已发送，S3不会发送访问控制头，因为S3认为它们是 不相关（通常是这样）。浏览器（用于CORS 当 通过XMLHTTPRequest执行跨源HTTP请求

根据这篇文章（），S3 cors脚本已经更新，包括：

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

向curl命令添加origin会返回CORS头。e、 g

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

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 fetch响应中返回cors头。该请求不包括源标题

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

---

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

转到您的S3存储桶。单击权限，然后单击CORS配置。 如果您有CORS配置，请从以下位置更改允许的原点：

<AllowedOrigin>*</AllowedOrigin>

*

到

http://*
https://*

如果没有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>

http://*
https://*
放
邮递
删除
得到
*
*
得到

Hi，你确定不需要为飞行前的请求也允许“选项”吗？这篇文章中的措辞有点模糊（），但对于规则“*”，它表示“规则还允许飞行前选项请求中的所有标题”。因此，我将此cors规则添加到S3并更新了问题。一些人说他们将允许的来源从“*”更改为“https://*”和“http://*”，请尝试一下。顺便说一下，您确定cloudfront没有缓存您的选项标头吗？同意-我认为Cloudflare正在缓存cors标头，并且正在使用旧S3 cors设置中的旧标头。我尝试过的任何东西似乎都无法清除此缓存（我只能重命名图像以解决此问题）。这基本上就是现在S3存储桶中存在的配置。但目前还不清楚是否有什么东西专门修复了Safari和iOS设备上的CORS错误。根据上面问题中的注释，我可以在所有其他浏览器和设备上使用它。从*到example.com的简单更改解决了我在Safari上的问题。我认为在AllowedOrigin上有完整的网站URL也能解决这个问题。

<AllowedOrigin>*</AllowedOrigin>

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

<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>