Google chrome 使用MapBox loadImage功能时，AWS S3 CORS错误仅出现在Chrome中

我正在使用MapBox，我希望在我的地图中添加一些AWS S3存储桶中的图像

我正在使用的MapBox函数是。loadImage文档声明“外部域必须支持CORS。”

我的JS代码类似于：

this.map.on('load', () => {
    ...
    this.map.loadImage("https://my-test-bucket.s3-us-west-1.amazonaws.com/long-uuid-here.png", (error, image) => {
    if (error) {
        console.log(error)
        throw error;
    }
// The rest doesn't matter
...

当我的地图加载到chrome中时，我收到以下错误：

Access to fetch at 'https://my-test-bucket.s3-us-west-1.amazonaws.com/long-uuid-here.png' from origin 'https://localhost:7000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我的AWS S3 CORS配置如下所示：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

使用

curl-H“origin:localhost”-vhttps://my-test-bucket.s3-us-west-1.amazonaws.com/long-uuid-here.png“

，我得到以下输出：

* Connected to my-test-bucket.s3-us-west-1.amazonaws.com (<IP HERE>) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/cert.pem
  CApath: none
* TLSv1.2 (OUT), TLS handshake, Client hello (1):
* TLSv1.2 (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS handshake, Server key exchange (12):
* TLSv1.2 (IN), TLS handshake, Server finished (14):
* TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
* TLSv1.2 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (OUT), TLS handshake, Finished (20):
* TLSv1.2 (IN), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (IN), TLS handshake, Finished (20):
* SSL connection using TLSv1.2 / ECDHE-RSA-AES128-GCM-SHA256
* ALPN, server did not agree to a protocol
* Server certificate:
*  subject: C=US; ST=Washington; L=Seattle; O=Amazon.com, Inc.; CN=*.s3-us-west-1.amazonaws.com
*  start date: Jul 30 00:00:00 2020 GMT
*  expire date: Aug  4 12:00:00 2021 GMT
*  subjectAltName: host "my-test-bucket.s3-us-west-1.amazonaws.com" matched cert's "*.s3-us-west-1.amazonaws.com"
*  issuer: C=US; O=DigiCert Inc; OU=www.digicert.com; CN=DigiCert Baltimore CA-2 G2
*  SSL certificate verify ok.
> GET /default.jpg HTTP/1.1
> Host: my-test-bucket.s3-us-west-1.amazonaws.com
> User-Agent: curl/7.64.1
> Accept: */*
> origin: localhost
> 
< HTTP/1.1 200 OK
< x-amz-id-2: bLicG+33kfSamR29vMA3BnhmSV27Afooba6yU6hVOPt0mbckO5gefhXN8Ho7hgAEP58s4hKjCf0=
< x-amz-request-id: E760D53EDC5A9804
< Date: Wed, 04 Nov 2020 22:31:38 GMT
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET, PUT, POST, DELETE
< Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
< Last-Modified: Tue, 11 Aug 2020 22:37:31 GMT
< ETag: "39eb0bbf2cc33ba02f53f8585004f820"
< Accept-Ranges: bytes
< Content-Type: image/jpeg
< Content-Length: 16579
< Server: AmazonS3

*连接到my-test-bucket.s3-us-west-1.amazonaws.com（）端口443（#0）
*阿尔卑斯山，提供h2
*ALPN，提供http/1.1
*已成功设置证书验证位置：
*CAfile:/etc/ssl/cert.pem
卡帕斯：没有
*TLSv1.2（输出），TLS握手，客户端问候（1）：
*TLSv1.2（IN）、TLS握手、服务器hello（2）：
*TLSv1.2（IN），TLS握手，证书（11）：
*TLSv1.2（IN）、TLS握手、服务器密钥交换（12）：
*TLSv1.2（IN），TLS握手，服务器完成（14）：
*TLSv1.2（输出）、TLS握手、客户端密钥交换（16）：
*TLSv1.2（OUT），TLS更改密码，更改密码规范（1）：
*TLSv1.2（输出），TLS握手，完成（20）：
*TLSv1.2（IN），TLS更改密码，更改密码规范（1）：
*TLSv1.2（IN），TLS握手，完成（20）：
*使用TLSv1.2/ECDHE-RSA-AES128-GCM-SHA256的SSL连接
*ALPN，服务器不同意协议
*服务器证书：
*主题：C=美国；ST=华盛顿；L=西雅图；O=亚马逊公司。；CN=*.s3-us-west-1.amazonaws.com
*开始日期：格林威治标准时间2020年7月30日00:00:00
*过期日期：8月4日12:00:00 2021 GMT
*subjectAltName:主机“my test bucket.s3-us-west-1.amazonaws.com”匹配证书“*.s3-us-west-1.amazonaws.com”
*发行人：C=美国；O=DigiCert公司；OU=www.digicert.com；CN=DigiCert巴尔的摩CA-2 G2
*SSL证书验证正常。
>GET/default.jpg HTTP/1.1
>主持人：my-test-bucket.s3-us-west-1.amazonaws.com
>用户代理：curl/7.64.1
>接受：*/*
>来源：本地主机
> 

所以，看起来我已经从AWS S3服务器返回了

访问控制允许源代码：

头文件

我在Firefox中没有收到任何CORS错误

我的AWS S3 CORS配置有问题吗？为什么我会在ChromeV86.0.4240.80（官方版本）（x86_64）中遇到这些CORS错误

---

注意：我的bucket实际上并没有命名为“我的测试bucket”。我已更改此问题的URL/存储桶名称。此外，我在本地使用

https://localhost

（使用证书进行设置，因为我需要使用W3C geolocation API，该API只在HTTPS上工作），如果这很重要的话，

这似乎是Chrome的缓存问题。我找到了这个问题的答案：，来自@nassan，建议将

？cacheblock=true

作为一个查询参数添加到GET请求中

因此，将我的代码更改为：

this.map.loadImage(`${dealInfo.properties.logo}?cacheblock=true`, (error, image) => {
    ...
})

解决Chrome中出现的CORS错误

看起来这就是问题所在：

我还向脚本标记添加了

crossorigin=“anonymous”

这似乎是一个Chrome缓存问题（头缓存？），也解释了为什么我可以使用

curl

看到预期的头，但Chrome抱怨它们不在那里