使用AJAX从CloudFront加载文件导致403（禁止）错误

我有一个坐在Amazon S3中的SVG文件和一个指向我的存储桶作为原点的Cloud Front分配。使用AJAX从CloudFront加载文件导致403（禁止）错误

我已经启用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>3000</MaxAgeSeconds> 
</CORSRule> 
</CORSConfiguration>

我还白下面列出头在我的云锋分配行为的选项。

Access-Control-Request-Headers 
Access-Control-Request-Method 
Origin

在单个独立的HTML文件，我很容易加载像SVG：当我为此在独立的HTML

$(document).ready(function() { 
      var settings = { 
       "crossDomain": true, 
       "url": "https://mycloudfront.cloudfront.net/images/one-TEST_1140924280.svg", 
       "method": "GET" 
      }; 

      $.ajax(settings).done(function (response) { 
       var svg = document.importNode(response.documentElement,true); 
       $("#svg").append(svg); 
      }); 
     });

，请求头的来源是空。但是当我尝试这样做在我的项目（春季启动1.5.3）请求头的由来是http://localhost:8080，我得到403响应的结果：

的XMLHttpRequest无法加载https://mycloudfront.cloudfront.net/images/one-TEST_1140924280.svg。对预检请求的响应未通过访问控制检查：请求的资源上没有“Access-Control-Allow-Origin”标头。因此'Origin'http://localhost:8080'不允许访问。响应有HTTP状态代码403

另外，有被添加一个报头添加到AJAX请求访问控制请求报头：X-CSRF令牌

完全相同的事情发生在我的EC2测试环境中。我认为localhost：8080来源是某种程度上的问题。

我是否在CloudFront或S3的某个位置缺少配置？

来源

2017-08-01 Milad

您是否设置了存储桶策略？ –

@TomNijs不，它是空的。 – Milad

根据this：

对于预检请求，如果该请求包括接入控制请求报头报头，验证CORSRule包括用于在接入控制 - 每个值的AllowedHeader条目请求头标头。

我选择GET，HEAD，OPTIONS的允许的HTTP方法云锋行为和下面的配置加入到我的S3 CORS配置和它工作得很好。

<AllowedHeader>x-csrf-token</AllowedHeader>

在我的情况是X-CSRF令牌正在加入到头部引起我的项目的页面是由春季安全保护区，它的工作，但要知道，任何其他自定义页眉被添加到请求中，Cloud Front将返回403.如此简单的选项将允许CORS配置中的所有标题。

<AllowedHeader>*</AllowedHeader>

来源

2017-08-02 00:05:37 Milad

使用AJAX从CloudFront加载文件导致403（禁止）错误

回答

相关问题