Amazon S3 CORS 在所有主要浏览器上出现 SVG 问题

Amazon S3 CORS issue with SVG on All major browser

本文关键字：SVG 问题 浏览器 S3 CORS 所有主 Amazon      更新时间：2023-09-26

我已经正确设置了S3（我相信是这样！），因为其他图像和网络字体正在从S3正确加载。但是，在我的HTML设计中，我有这个 -

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

不知何故，它没有在所有浏览器上加载（我已经在 铬 和 火狐 ）。在 chrome 上，它至少给出了一个错误，Firefox 会默默地关闭它。

我刚刚找到了一个类似的资源 - https://github.com/jonathantneal/svg4everybody/issues/16。

如何解决这个问题。

经过几天的研究，没有解决方案，就像我们想象的 SVG <use> 标签应该与 CORS 一起工作一样。

这是浏览器开发人员正在等待SVG工作组的一项功能。

一般来说，

这通常是因为您的 S3 存储桶上尚未启用跨源资源共享 （CORS）。

您可以在此处找到启用它的演练。检查标题为"如何在存储桶上启用 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>HEAD</AllowedMethod> <!-- optional line -->
<MaxAgeSeconds>3000</MaxAgeSeconds> <!-- optional line -->
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

最简单的方法可能是 https://s3browser.com/，存储桶>CORS配置。粘贴XML代码，就是这样

相关文章：