我们的网站在使用最新版本的Chromium(版本33.0.1722.0 - 237596)和Chrome Canary在Amazon S3存储桶上加载CSS和JS资源时遇到问题.它适用于任何其他浏览器,包括当前的Chrome(31.0.1650.57).

错误是:

来自" https://mybucket.s3.amazonaws.com "的脚本已被跨源资源共享策略阻止加载:请求的资源上没有"Access-Control-Allow-Origin"标头.因此,不允许来源" https://app.example.com "访问.

我们在资源桶上的S3 CORS配置是:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>300000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

这是Chromium的错误吗？最新的CORS规格有什么变化吗？

问题

我一直在试图浏览围绕AWS生态系统的许多3个字母的缩写词服务.

我要做的是在网站上显示内容(pdf,图像,视频),其中该内容只能在网站上显示给经过身份验证的用户,而不能下载或公开访问.

我的问题是,无论我尝试什么,不允许完全公开访问存储桶,在从前端请求图像内容时给出403错误.

该应用程序的体系结构是一个前端JS应用程序,通过在S3上托管的CloudFront分发服务.这与EC2上托管的后端进行通信.

到目前为止我尝试过的

CORS配置

关于该主题的文档似乎暗示简单地创建CORS规则以允许从我的网站访问存储桶中的对象.

我创建了一个CORS策略,类似于桶的以下内容,它应允许访问存储桶中的对象:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://*.websitename.com</AllowedOrigin>
    <AllowedOrigin>https://*.websitename.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

这里没有运气,403错误.作为测试它是否可能不是CORS配置的测试,我打开了CORS策略以尝试允许公共CORS访问存储桶,如下所示:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

这里没有运气,stackoverflow上的其他人提到有一个记录的问题AllowedOrigin: *,并尝试以下:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>http://*</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

一个用户指出stackoverflow,Origin默认情况下直接链接的内容不发送标头,这意味着S3会将其解释为内部请求并发送403禁止错误.对此的解决方案是添加crossorigin="anonymous"到图像标记.

将此属性添加到img标记后,将确认标题已正确发送.它正在Origin: mywebsitename.com请求标题中发送正确的,我甚至收到response包括我的网站在内的允许来源的正确标题.

Cloudfront分发问题

根据此答案,默认情况下,cloudfront不会将标头转发到S3.我已经采取了转发所有标头的步骤,包括Access-Control-Allow-Methods和Access-Control-Allow-Origin. …