Amazon S3 圖像獲取 CORS Chrome 中的錯誤/錯誤，Firefox 中沒有錯誤

Question

有一個錯誤或錯誤，在獲取圖像時很可能可以通過 Amazon S3 中的配置選項修復。 我在Stack Overflow和AWS Forums中看到了關於此的參考。 大多數人沒有做的是讓它易於復制，下面的小提琴應該這樣做，所以這很容易想象。

這是一個連接到我們當前實例中的圖像的 JS Fiddle：

http://jsfiddle.net/02nojg8w/

正如您在<img>標簽內看到的那樣，即使在 Chrome 中也可以正常獲取圖像。 但是，當您嘗試通過 Canvas 或 Filereader 進行轉換時，它將不起作用，並拋出以下錯誤：

Canvas

Image from origin 'https://siga-pmx.s3.amazonaws.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

文件閱讀器

XMLHttpRequest cannot load https://siga-pmx.s3.amazonaws.com/digitalization/1448213569280_saya_pixel.png. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

本質上，當在 Windows 系統中使用來自 Chrome 和 Chromium 的請求加載圖像時，請求將失敗，在 Microsoft Edge 中也會失敗。 我已經用多台 Windows 7 和 Windows 10 機器確認了這一點。 但是在這些相同的機器上，如果您使用 Firefox 來執行相同的請求，它將起作用。 朋友無法在 OS X Chrome/Chromium 上復制它。

我們使用的初始配置是這樣的：

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

在嘗試了一些處理類似問題的 Stack Overflow 答案后，我們切換到這個：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>ETag</ExposeHeader>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>http://*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>ETag</ExposeHeader>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>ETag</ExposeHeader>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

您可能認為這可能是瀏覽器范圍的問題，但是，如果我們將相同的 JSFiddle 與來自維基共享資源的圖像一起使用，它將在 Chrome 和 Edge 上運行，請參閱下面的 JS Fiddle。

http://jsfiddle.net/hy4wxggx/

如果我們想解決這個問題，我們的 CORS 配置應該如何？ 或者另一個可行答案的選擇是：我們如何編輯我們的 Canvas JavaScript 方法，以便它正確地獲取這些圖像？

Answer 1

設法解決了這個問題。 首先，我將 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>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

允許任何標題，然后我將用於訪問文件的 URL 從“https”切換為“http”。

即使使用上述配置，Https 仍然會拋出錯誤，使用 http 是必不可少的。

之后，一切都在 Chrome/Chromium 中運行。

Answer 2

對於 safari 修復，在 s3 存儲桶的 cors 配置中的 allow 方法中添加 head。 所以它看起來像這樣

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