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

我在AmazonS3中有一个SVG文件和一个云前端分发版，它指向我的bucket作为源

我已在桶上启用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>

在单个独立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）中尝试这样做时，请求头的来源是，结果得到403响应：

无法加载XMLHttpRequest。对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。因此，不允许访问源“”。响应的HTTP状态代码为403

另外，还有一个头被添加到AJAX请求访问控制请求头：x-csrf-token

在我的EC2测试环境中也会发生同样的事情。我认为origin中的localhost:8080在某种程度上是个问题

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

根据：

对于飞行前请求，如果请求包含访问控制请求标头，请验证CORSRule是否包含访问控制请求标头中每个值的AllowedHeader条目

我选择了云前端行为的允许HTTP方法的GET、HEAD、OPTIONS，并将下面的配置添加到我的S3 CORS配置中，效果很好

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

x-csrf-token

在我的情况下，x-csrf-token被添加到标题中，因为我的项目中的页面处于spring security的保护区域中，它工作了，但请注意，任何其他自定义标题被添加到请求中，Cloud Front将返回403。所以更简单的选择是允许CORS配置中的所有头

<AllowedHeader>*</AllowedHeader>

*

您设置了存储桶策略吗？@TomNijs否，它是空的。

<AllowedHeader>*</AllowedHeader>