所有主要瀏覽器上的 SVG 的 Amazon S3 CORS 問題

Question

我已經正確設置了 S3（我相信是這樣！！）因為其他圖像和 webfonts 正在從 S3 正確加載。 但是，在我的 HTML 設計中，我有這個 -

<svg><use xlink:href="assets/img/i.svg#i-facebook"></use></svg>

不知何故，它並沒有在所有瀏覽器上加載（我已經在 Chrome 和 Firefox 上進行了測試）。 在 chrome 上，它至少給出了一個錯誤，firefox 默默地駁回了它。

我剛剛找到了一個類似的資源 - https://github.com/jonathantneal/svg4everybody/issues/16 。

如何解決這個問題。

Answer 1

經過幾天的研究，我們認為 SVG <use>標簽應該與 CORS 一起工作，沒有解決方案。

這是瀏覽器開發人員正在等待SVG 工作組提供的一項功能。

Answer 2

一般來說，這通常是因為您的 S3 存儲桶尚未啟用跨域資源共享 (CORS)。

您可以在此處找到啟用它的演練。 檢查標題為“如何在我的存儲桶上啟用 CORS？”的部分。

Answer 3

以下代碼解決了問題

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

最簡單的方法可能是https://s3browser.com/ ，Buckets > CORS 配置..粘貼 XML 代碼，就是這樣