Amazon s3 存储桶、CORS 问题、标头来源

如何解决Amazon s3 存储桶、CORS 问题、标头来源

我们使用 Amazon s3 存储桶来存储我们的文件。在前端，我们必须这样做：

fetch('https://some-bucket.s3.eu-central-1.amazonaws.com/some-bucket/4575/some-image.png');

在amazon s3 bucket配置上，我们添加了cors配置：

[
{
    "AllowedHeaders": [
        "*"
    ],"AllowedMethods": [
        "GET","HEAD"
    ],"AllowedOrigins": [
        "*"
    ],"ExposeHeaders": [],"MaxAgeSeconds": 3000
}

]

这里的主要问题是标题来源。在某些情况下，浏览器会设置标头来源，而在某些情况下则不会。

这里以一切正常的情况为例：

GET /some-bucket/4016/Elephant_Large_PNG_Clipart-1047.png HTTP/1.1
Host: some-bucket.s3.eu-central-1.amazonaws.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
sec-ch-ua: " Not A;Brand";v="99","Chromium";v="90","Google Chrome";v="90"
Accept: application/json,text/plain,*/*
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/90.0.4430.93 Safari/537.36
Origin: https://some-domain.com
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://some-domain.com/
Accept-Encoding: gzip,deflate,br
Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7,uk;q=0.6

这是一个由于缺少原始标头而失败的请求。

GET /some-bucket/4608/469705261---Copy.jpeg HTTP/1.1
sec-ch-ua: " Not A;Brand";v="99",/
Referer: https://some-domain.com/
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/90.0.4430.93 Safari/537.36

在亚马逊文档中，我们可以看到 - 需要原始标头。没有源头，cors 问题。 Origin 标头发送，cors 运行良好。

我们还有一件更重要的事情，我们在前端使用 https://quasar.dev/。

我们决定创建没有任何前端框架的纯 js。只是为了测试。简单的 html 只需 fetch。它无处不在！它发送标头来源。

我们在以下方面进行了测试： Firefox - 在所有情况下都很好。 Chrome - 存在问题。

此时我们正在使用 nginx 的解决方法，就像代理服务器到亚马逊 s3 存储桶一样，但我们想直接使用 s3 存储桶。

我很困惑。请分享您的想法，或者我们可能遗漏了一些东西。我会心安的。谢谢！

解决方法

我们解决了问题，this article 帮助了我们。我们添加这个“?some-parameter=some-unique-text”它解决了问题。浏览器缓存问题。