javascript - 使用 AJAX 从 CloudFront 加载文件会导致 403(禁止)错误

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 中执行此操作时，请求 header 的来源是 null。但是当我尝试在我的项目(Spring Boot 1.5.3)中执行此操作时，请求 header 的来源是 http://localhost:8080 结果我得到 403 响应:

XMLHttpRequest cannot load https://mycloudfront.cloudfront.net/images/one-TEST_1140924280.svg. Response to the preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 403.

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

完全相同的事情发生在我在 EC2 上的测试环境中。我认为 localhost:8080 in origin 是某种问题。

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

Answer 1

根据 this :

For a preflight request, if the request includes an Access-Control-Request-Headers header, verify that the CORSRule includes the AllowedHeader entries for each value in the Access-Control-Request-Headers header.

我选择了 Cloud Front 行为的 Allowed HTTP Methods 的 GET, HEAD, OPTIONS 并将以下配置添加到我的 S3 CORS 配置中，它运行良好。

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

在我的情况下，x-csrf-token 被添加到 header 中，导致我的项目中的页面处于 spring security 的保护区内，它有效但请注意任何其他自定义将 header 添加到请求中，Cloud Front 将返回 403。更简单的选项是允许 CORS 配置中的所有 header 。

<AllowedHeader>*</AllowedHeader>