Question

我有一个位于Amazon S3的SVG文件和一个Cloud Front发行版，它指向我的存储区作为源。

我已经在下面启用了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，如：

$(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);
            });
        });

当我在独立HTML中执行此操作时，请求标头的来源为 null 。但是当我尝试在我的项目中执行此操作时（Spring Boot 1.5.3）请求标头的来源是 http://localhost:8080 ，结果我得到403响应：

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

此外，还有一个标题被添加到AJAX请求 access-control-request-headers：x-csrf-token

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

我是否在CloudFront或S3的某个地方错过了配置？

Answer 1

根据this：

对于预检请求，如果请求包含Access-Control-Request-Headers标头，请验证CORSRule是否包含Access-Control-Request-Headers标头中每个值的AllowedHeader条目。

我选择了Cloud Front行为的允许的HTTP方法的 GET，HEAD，OPTIONS ，并将下面的配置添加到我的S3 CORS配置中，并且工作正常。

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

在我的情况下， x-csrf-token 被添加到标题中导致我的项目中的页面被Spring安全保护在一个受保护的区域，它工作但只是知道任何其他自定义要添加到请求中的标头，Cloud Front将返回403.因此，更容易的选项是允许CORS配置中的所有标头。

<AllowedHeader>*</AllowedHeader>

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

1 个答案: