使用 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>

我还在我的云前端分发的行为选项中将 headers 列入白名单。

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.

此外，AJAX 请求中添加了 header access-control-request-headers:x-csrf-token

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

我是否在 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 行为的 GET、HEAD、OPTIONS 或 Allowed HTTP Methods，并将以下配置添加到我的 S3 CORS 配置中而且效果很好。

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

在我的情况下，x-csrf-token 被添加到 headers，因为我项目中的页面被 spring 安全性，它有效，但请注意，任何其他自定义 headers 被添加到请求中，Cloud Front 将 return 403。更简单的选择是在您的 CORS 配置中允许所有 headers .

<AllowedHeader>*</AllowedHeader>

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

Loading file from CloudFront using AJAX causes 403 (Forbidden) error

javascript

ajax

amazon-web-services

amazon-s3

amazon-cloudfront