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

如何解决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”标头资源。如果不透明的响应满足您的需求，请设置请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。

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-worker 9.1.12。
向img和图片标签添加crossorigin =“ anonymous”似乎没有帮助。

在Chrome / PC中一致地重现错误的步骤：

清除浏览器缓存
打开私人/隐身浏览器
转到网站-图片显示还可以
单击刷新-不再显示图像-浏览器控制台中出现CORS错误

更新

基于此帖子（S3 not returning Access-Control-Allow-Origin headers?），问题似乎在于服务工作者未在请求标头中发送原始消息（因此S3不发送访问控制标头）。

服务人员请求（从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

首先，确保每个请求都带有一个Origin标头。如果没有Origin标头发送，S3不会发送访问控制标头，因为S3认为它们无关紧要的（通常是这样）。浏览器（为此使用CORS 机制的意思）将在以下情况下自动发送Origin标头通过XMLHTTPRequest执行跨域HTTP请求。

基于此帖子（S3 - Access-Control-Allow-Origin Header），S3 cors脚本已更新为包括：

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

向img标签添加crossorigin =“ anonymous”不会更改服务工作者请求标头。因此，这不能解决问题。

Cloudflare缓存已清除。

此晦涩的帖子（https://community.cloudflare.com/t/access-control-allow-origin-headers-stripped/158102/2）包括：

如果您在原始Web服务器上添加或更改CORS配置，通过URL清除Cloudflare缓存不会更新CORS标头。

我通过添加随机查询字符串（例如，banner.jpg？q = abc）来缓存删除banner.jpg图片。标语图像始终正确显示（而其他图像仍显示cors错误）。 Chrome控制台“应用程序标签”>“缓存存储”中的服务工作者缓存显示图像已缓存。 Cloudflare缓存配置“缓存级别” =标准“每次查询字符串更改时都会提供不同的资源”。

~~但是，如果我将新图像上传到S3 banner01.jpg（即尚未被Cloudflare缓存），则确实会出现显示该图像的错误提示。~~我通过上传不同的图像尝试了另外三遍图像名称，但未获得cors错误。有趣的是，一个小时后，即使新图像也显示出cors错误。

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

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

在curl命令中添加原点并不会返回CORS标头。例如

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标头。该请求不包含Origin标头。

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

但是，Safari没有。所有浏览器似乎都可以正常运行，但是Safari仍然显示错误错误。

解决方法

转到您的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>

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

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

解决方法

相关推荐