google-chrome - 使用 MapBox loadImage 函数时，仅在 Chrome 中出现 AWS S3 CORS 错误

Question

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

我使用的 MapBox 函数是 loadImage . 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
...

当我的 map 在 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"-v "https://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

所以，看起来我有从 AWS S3 服务器返回的 Access-Control-Allow-Origin: * header 。

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

我的 AWS S3 CORS 配置有问题吗？为什么我在 Chrome v86.0.4240.80(官方构建)(x86_64) 中收到这些 CORS 错误？

注意:我的桶实际上并没有命名为“my-test-bucket”。我已经更改了这个问题的 URL/bucket 名称。此外，我在本地使用 https://localhost(使用证书设置它，因为我需要使用只能通过 HTTPS 工作的 W3C 地理定位 API)，如果重要的话

Answer 1

这似乎是 Chrome 的缓存问题。我找到了这个问题的答案:CORS problems with Amazon S3 on the latest Chomium and Google Canary ，来自 @nassan，建议将 ?cacheblock=true 作为查询参数添加到 GET 请求。

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

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

解决了 Chrome 中出现的 CORS 错误。

看起来问题是这样的:https://bugs.chromium.org/p/chromium/issues/detail?id=409090 .

我还在我的脚本标签中添加了 crossorigin="anonymous"。

这似乎是一个 Chrome 缓存问题( header 缓存？)也解释了为什么我可以使用 curl 看到预期的 header ，但 Chrome 提示它们不存在。