Laden der Datei von CloudFront mit AJAX verursacht 403 (Forbidden) Fehler

Question

Ich habe eine SVG-Datei in Amazon S3 und eine Cloud Front-Verteilung, die auf meine Bucket als Ursprung zeigt.

Ich habe CORS auf dem heißen Stein, wie unten aktiviert:

<?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> 

Ich weiß auch unter Überschriften in den Optionen des Verhaltens meiner Wolkenfront Verteilung aufgeführt.

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

In einer einzigen eigenständigen HTML-Datei, ich habe die SVG leicht wie laden:

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

Wenn ich dies im Standalone-HTML zu tun, ist der Ursprung des Request-Header null. Aber wenn ich versuche, dies in meinem Projekt zu tun (Frühjahr Boot-1.5.3) Der Ursprung des Request-Header ist http://localhost:8080 und ich bekomme 403 Antwort als Ergebnis:

XMLHttpRequest https://mycloudfront.cloudfront.net/images/one-TEST_1140924280.svg nicht geladen werden kann. Die Antwort auf die Preflight-Anforderung besteht keine Prüfung der Zugriffssteuerung: Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Ursprung 'http://localhost:8080' ist daher nicht erlaubt. Die Antwort hatte HTTP-Statuscode 403.

Außerdem gibt es einen Header auf die Anfrage AJAX hinzugefügt werden Access-Control-Anfrage-Header: x-CSRF-Token

Genau das gleiche geschieht in meiner Testumgebung auf EC2. Ich dachte localhost: 8080 im Ursprung ist irgendwie das Problem.

Fehle ich irgendwo in CloudFront oder S3 eine Konfiguration?

Answer 1

Nach this:

Für eine Preflight-Anfrage, wenn die Anforderung eines Access-Control-Request-Header-Header enthält, stellen Sie sicher, dass die CORSRule für jeden Wert in dem Access-Control- die AllowedHeader Einträge enthält Anforderungs-Kopfzeilen-Header.

Ich wählte GET, HEAD, OPTIONS von erlaubt HTTP-Methoden des Cloud-Front-Verhalten und unter Konfiguration meiner S3 CORS-Konfiguration hinzugefügt und es funktionierte gut.

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

In meiner Situation, dass x-csrf-Token wurde auf die Header verursachen in meinem Projekt der Seite hinzugefügt wird durch Feder Sicherheit in einem geschützten Bereich war, funktionierte es aber nur bewusst sein, dass andere benutzerdefinierte Header Wenn Sie der Anforderung hinzufügen, gibt Cloud Front 403 zurück. Eine einfachere Option wäre also, alle Header in Ihrer CORS-Konfiguration zuzulassen.

<AllowedHeader>*</AllowedHeader>