所有主要浏览器上的 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 代码，就是这样