javascript - 无法加载 <资源> : No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

当我尝试从 S3 存储桶加载 .svg 图标时，我的控制台中出现此错误:

Failed to load https://<my_bucket>.s3.amazonaws.com/static/js/Trumbowyg-master/dist/ui/icons.svg: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'https://<my_site>.com' is therefore not allowed access.

知道如何解决这个问题吗？

Answer 1

1. 转到您的 S3 控制台
2. 点击您的存储桶名称
3. 转到“权限”
4. 转到“CORS 配置”

5. 配置您的 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>POST</AllowedMethod>
       <AllowedMethod>PUT</AllowedMethod>
       <AllowedHeader>*</AllowedHeader>
   </CORSRule>
   </CORSConfiguration>