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> 

私も私のクラウドフロント分布の行動の選択肢で、ヘッダーの下に白い記載されています。単一のスタンドアロンHTMLファイルで

Access-Control-Request-Headers 
Access-Control-Request-Method 
Origin 

、私は簡単のようにSVGをロードすることができます。私は、スタンドアロンのHTMLにこれを行うと

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

を、リクエストヘッダの起源は、ヌルです。 しかし、私は私のプロジェクト（春ブーツ1.5.3）でこれを行うにしようとすると、リクエストヘッダの起源は、http://localhost:8080であると私は、結果として403の応答を取得：

のXMLHttpRequestがhttps://mycloudfront.cloudfront.net/images/one-TEST_1140924280.svgをロードすることはできません。プリフライト要求に対する応答がアクセス制御チェックに合格しない：要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーが存在しない。 Origin 'http://localhost:8080'はアクセスできません。応答は、HTTPステータスコードを403

を有していた。また、AJAX要求アクセス制御要求ヘッダーに追加されるヘッダがある：X-CSRFトークン

がまったく同じことが起こります私のテスト環境ではEC2。私はlocalhost：8080の起源は何とか問題だと思った。

CloudFrontまたはS3のどこかに設定がありませんか？ thisによれば

Answer 1

：

プリフライト要求について、要求がアクセス・コントロール・リクエスト・ヘッダのヘッダを含む場合、CORSRuleがAccess-管理 - の各値についてAllowedHeaderエントリが含まれていることを確認Request-Headersヘッダー。

私はGET、HEAD、OPTIONS のクラウドフロント行動のHTTPメソッドを許可し、私のS3 CORS設定にコンフィギュレーションの下に追加し、それがうまく働いたを選びました。 X-CSRFトークンがヘッダに追加されたことを

私の状況で

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

は私のプロジェクトでページを引き起こす春のセキュリティで保護された領域にあった、それは働いていたが、ただ、他のカスタムヘッダがあることに注意してください要求に追加されると、Cloud Frontは403を返します。したがって、CORS設定のすべてのヘッダーを許可する方が簡単です。

<AllowedHeader>*</AllowedHeader>