由於 CORS，無法從 S3 存儲桶獲取圖像

Question

問題是當我嘗試使用fetch API 獲取時，我收到 cors 錯誤（響應 header 不包含Access-Control-Allow-Origin ）。 這是我在 S3 中的 cors 配置 -

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

代碼可以在這里找到 - https://codepen.io/sourov0805045/pen/OKVBXM?editors=1111

我檢查了響應 header，發現它不包含Allow-Access-Control-Origin header。

但是，如果我將它添加到一個非常令人費解的<img>標記中，這將正常工作。 那時響應 header 中也沒有Access-Control-Allow-Origin ，但圖像加載正確。

A 已嘗試與axios相同，但沒有效果。

請讓我知道您對如何解決此問題的建議。

Answer 1

首先刪除不必要的變量：從命令行使用 cURL。

第 1 步：發出飛行前OPTIONS請求：

curl -H "Origin: http://example.com" \
      -H "Access-Control-Request-Method: GET" \
      -H "Access-Control-Request-Headers: X-Requested-With" \
      -X OPTIONS --verbose \
      'https://twisker-s3-files.s3.us-east-2.amazonaws.com/files/-GxfyX_dZ-6313383.jpg'

您在輸出中查找的響應標頭是：

...
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET, POST, PUT, HEAD, DELETE
< Access-Control-Allow-Headers: x-requested-with
< Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
...

第 2 步：發出GET請求：

~ $ curl --head 'https://twisker-s3-files.s3.us-east-2.amazonaws.com/files/-GxfyX_dZ-6313383.jpg' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36' -H 'Referer: https://cdpn.io/boomboom/v2/index.html?editors=1111&key=iFrameKey-a88ea9ee-51a6-0ae2-7350-951a5b1e4e56' -H 'Origin: https://cdpn.io' --compressed

這是回應：

HTTP/1.1 200 OK
x-amz-id-2: 9D3J5BnHo7YocXQicso+eQAC/PlyoOMpc5QXd+G77HMtWTOd8kYymcJnQ0T8J7tqXetMZgVO8Rw=
x-amz-request-id: 6CE1579D5B039163
Date: Thu, 25 Jul 2019 02:18:41 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, HEAD, DELETE
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Last-Modified: Wed, 26 Jun 2019 19:18:40 GMT
ETag: "8e26c03714ab4d8e185c29b1c04639f0"
Accept-Ranges: bytes
Content-Type: application/octet-stream
Content-Length: 1573767
Server: AmazonS3

幾點注意事項：

1. Access-Control-Allow-Origin和Access-Control-Allow-Methods
2. 它們的值看起來是正確的，所以 CORS 應該對你有用（它在你的 URL 上對我有用）

https://www.test-cors.org可用於測試 CORS 請求。 它在請求的每個階段提供一些輸出。

最后，瀏覽器在緩存飛行前 OPTIONS 請求方面非常積極。 因此，如果您正在查看 chrome 網絡調試工具，您可能看不到飛行前 OPTIONS 請求。 有時重啟chrome會清除OPTIONS緩存，有時需要清除所有瀏覽器緩存。

如果您沒有正確配置 CORS 的服務器端，並且瀏覽器緩存響應，則此緩存可能會出現問題。 例如：您在最初配置 CORS 時不允許GET 。 您發出OPTIONS請求，瀏覽器緩存響應，阻止未來的GET請求。

Answer 2

由於 S3 鏈接以//開頭，它將使用當前協議發出請求。 如果您有http://localhost AWS 將不允許您通過 http 發出請求，即使AllowedOrigins是* 。

在 axios url 參數中使用https前綴 URL，它應該可以工作。

Answer 3

問題在於 S3 在內部感知AllowedOrigins值配置的方式。 Try giving https://*.yourdomain.com instead of https://something.yourdomain.com in your S3 bucket level CORS Configuration, Here is my sample configuration and it works!

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://*.yourdomain.com"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]