所有主要浏览器上的 SVG 的 Amazon S3 CORS 问题答案

【问题标题】：Amazon S3 CORS issue with SVG on All major browser所有主要浏览器上的 SVG 的 Amazon S3 CORS 问题
【发布时间】：2014-12-13 12:23:38
【问题描述】：

我已经正确设置了 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。

如何解决这个问题。

【问题讨论】：

标签： javascript html amazon-web-services svg amazon-s3

【解决方案1】：

经过几天的研究，我们认为 SVG <use> 标记应该与 CORS 一起使用的方式没有解决方案。

这是browser developers 正在等待来自SVG Working Group 的功能。

【讨论】：

【解决方案2】：

一般来说，这通常是因为您的 S3 存储桶上尚未启用跨域资源共享 (CORS)。

您可以找到enable it here 的演练。检查标题为“如何在我的存储桶上启用 CORS？”的部分。

【讨论】：

【解决方案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 代码，就这样

【讨论】：