Chargement du fichier à partir de CloudFront en utilisant AJAX causes 403 (Forbidden) erreur

Question

J'ai un fichier SVG assis dans Amazon S3 et une distribution Cloud Front qui pointe vers mon seau comme origine.

J'ai permis CORS sur le seau comme ci-dessous:

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

I blanc a également énuméré ci-dessous les en-têtes dans les options des comportements de ma distribution avant nuage.

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

Dans un seul fichier HTML autonome, je peux facilement charger le SVG comme:

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

Quand je fais cela en HTML autonome, l'origine de l'en-tête de la requête est null. Mais quand j'essaie de le faire dans mon projet (Spring Boot 1.5.3) L'origine de l'en-tête de requête est http://localhost:8080 et je reçois 403 réponse en conséquence:

XMLHttpRequest ne peut pas charger https://mycloudfront.cloudfront.net/images/one-TEST_1140924280.svg. La réponse à la demande de contrôle en amont ne passe pas la vérification du contrôle d'accès: aucun en-tête «Access-Control-Allow-Origin» n'est présent sur la ressource demandée. L'origine 'http://localhost:8080' n'est donc pas autorisée. La réponse a un code d'état HTTP 403.

En outre, il y a un en-tête ajouté à la requête AJAX de contrôle d'accès-demande-en-têtes: x-CSRF-token

La même chose se produit dans mon environnement de test sur EC2. Je pensais localhost: 8080 d'origine est en quelque sorte le problème. Ai-je oublié une configuration quelque part dans CloudFront ou S3?

Answer 1

Selon this:

Pour une demande de contrôle en amont, si la demande comprend un en-tête Access-Control-Demande-en-têtes, vérifiez que le CORSRule inclut les entrées AllowedHeader pour chaque valeur dans l'accès-contrôle- En-tête Request-Headers.

J'ai choisi GET, HEAD, OPTIONS de admis méthodes HTTP du comportement avant Cloud et ajouté ci-dessous la configuration de ma configuration S3 CORS et il a bien fonctionné.

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

Dans ma situation x-CSRF-jeton a été ajoutés à l'en-tête provoquent la page dans mon projet était dans une zone protégée par la sécurité du printemps, il a travaillé, mais juste être conscient que tous les autres en-têtes personnalisés En cours d'ajout à la requête, Cloud Front renvoie 403. L'option la plus facile serait d'autoriser tous les en-têtes dans votre configuration CORS.

<AllowedHeader>*</AllowedHeader>