Question

我在我的根文件夹（也在AWS S3 englify存储桶上）上转储了一个index.html文件，我正在尝试从images文件夹中将图像加载到网页上。我的CORS配置已设置为：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>englify.s3-website-ap-southeast-1.amazonaws.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

我的请求标题是这样的：

Accept:image/webp,image/*,*/*;q=0.8  
Accept-Encoding:gzip, deflate, sdch, br  
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6  
Cache-Control:max-age=0  
Connection:keep-alive  
Host:s3-ap-southeast-1.amazonaws.com  
If-Modified-Since:Wed, 26 Oct 2016 17:25:03 GMT  
If-None-Match:"f599a968271741f977379e125797434e"  
Referer:http://englify.s3-website-ap-southeast-1.amazonaws.com/  
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36

我知道CORS会在标题中查找“Origin”，但如何为html <img>标记设置？我唯一的工作就是将图像公之于众。

Answer 1

看起来你在这里混合了一些概念。

网页可以自由地嵌入来自其他域的静态内容（图像，视频等）。浏览器通常会很乐意让你。
对于像AJAX调用这样的更动态的东西，浏览器默认会保护您不要对其他域进行调用。例如，原因是在成为跨站点脚本攻击的受害者之后保护您免受恶意AJAX调用。服务器B上具有服务器A的allow-origin的CORS头将指示浏览器从服务器A呈现站点以允许对服务器B的AJAX调用。
S3对其提供给互联网的文件具有访问控制权。

在您的情况下，您将嵌入在S3上托管的静态图像。 S3正在响应403.在浏览器级别上发生CORS保护。 403发生在HTTP级别。因此S3实际上是在告诉您的浏览器您不能获取图像。检查此方法的方法：直接从浏览器中的S3请求图像。应该出现相同的错误。这样，您可以确定CORS问题是不可能的。

您已经找到问题的解决方案：公开图片。然后S3会愉快地服务。

如果您不想公开图片，可以查看S3文档如何保护图片。但通常情况下，只有具有会话/登录AWS的用户才能使用这些图像。另一种选择是查看CloudFront，您可以在其中定义允许您在Web应用程序中生成令牌的策略，该令牌可以访问特定的CloudFront资源（可以由S3支持）。

错误403尝试将CORS与在AWS S3上托管的静态网站加载映像一起使用

1 个答案: