使用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中執行此操作時，請求標頭的原點為空 。 但是當我嘗試在我的項目中執行此操作時（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

根據這個 ：

對於預檢請求，如果請求包含Access-Control-Request-Headers標頭，請驗證CORSRule是否包含Access-Control-Request-Headers標頭中每個值的AllowedHeader條目。

我選擇了GET，HEAD， Cloud Front行為的允許HTTP方法的選項 ，並將下面的配置添加到我的S3 CORS配置中，它運行正常。

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

在我的情況下， x-csrf-token被添加到標題中導致我的項目中的頁面被Spring安全保護在一個受保護的區域，它工作但只是要知道任何其他自定義標頭被添加到請求，Cloud Front將返回403.如此簡單的選項將允許您的CORS配置中的所有標頭。

<AllowedHeader>*</AllowedHeader>