web-dev-qa-db-fra.com

Permettre AJAX GET d'Amazon S3? (Access-Control-Allow-Origin)

Je stocke des objets JSON dans Amazon S3 et j'aimerais charger ces données directement à partir de S3 à partir de Javascript. Mon GET semble assez générique:

$.ajax({
    'type':'GET',
    'url':'http://s3.amazonaws.com/mybucketname/'+id,
    'dataType':'text',
    'success':function(msg) {
        alert(msg);
    }
});

Je reçois l'erreur suivante:

XMLHttpRequest cannot load http://s3.amazonaws.com/whatever/whatever. Origin http://mylocalhostname:9000 is not allowed by Access-Control-Allow-Origin.

Je peux obtenir cette URL de S3 à l’aide de curl ou en y allant directement depuis mon navigateur. Est-ce que je vais vraiment devoir envoyer toutes ces demandes par proxy via mes propres serveurs?

javascriptjqueryamazon-s3
35
Ben Dilts

S3 prend désormais en charge les demandes interdomaines à l’aide du fichier CORS.

Vous pouvez trouver plus d'informations ici:

http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors

et:

http://aws.typepad.com/aws/2012/08/Amazon-s3-cross-Origin-resource-sharing.html

37
Manmeet Singh

S3 n'envoie pas l'en-tête 'Access-Control-Allow-Origin' si vous utilisez le caractère générique * comme:

<AllowedOrigin>*</AllowedOrigin>

Pour forcer s3 à envoyer l'en-tête AllowedOrigin tout en laissant votre contenu chargé depuis n'importe quel site, utilisez ceci:

<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>
42
Ludo - Off the record

Beaucoup recherché - Voici l'exemple de solution:

http://blog.bignerdranch.com/1670-upload-directly-to-Amazon-s3-with-support-for-cors/

(Ajouter des cors sur l'onglet des autorisations du compartiment)

<?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>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
6
griffon vulture

Nous avons eu un problème similaire, mais pas avec GET mais avec S3 POST présigné. Je pensais que cela pourrait être utile pour quelqu'un cherchant ce problème dans Google.

dans certains navigateurs, Dropzone.js n'a pas été en mesure de télécharger des images directement dans le compartiment S3 (S3 POST pré-signé). Ce qui est étrange, c’est que cela se produisait tout le temps sur certains ordinateurs et sur un essai sur vingt. 

Sur un ordinateur, nous parvenons à capturer l'erreur dans Firefox Debugger (onglet Réseau)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3-eu-west-1.amazonaws.com/pobble.com-browser-uploads-production. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3-eu-west-1.amazonaws.com/pobble.com-browser-uploads-production. (Reason: CORS request failed).

La mise à jour de la corbeille de corbeilles S3 pour cela a fonctionné pour nous:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://www.myapp.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
        <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://www.app.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
        <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
    </CORSRule>
</CORSConfiguration>

une partie importante est le <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader> grâce à ce S3 expose l'en-tête de réponse OPTIONS et POST

 enter image description here

Travail collaboratif de @ anas-alaoui , @joserose & @equivalent

4
equivalent8

Vous pouvez utiliser une requête jsonp au lieu de json. Voici les détails . http://api.jquery.com/jQuery.ajax/

3
Aatif Farooq

Vous souhaiterez peut-être augmenter la configuration de MAX AGE si vous avez des fichiers plus volumineux dont le téléchargement prend plus de temps ou qui risquent d'être interrompus plus tôt. L'hébergement multimédia, etc. en aura besoin. Ma configuration pour l'accès générique (tous les domaines) était de 10000 secondes maximum, ce qui devrait être plus long en toute sécurité que quiconque n'a besoin de télécharger mes fichiers, même sur une mauvaise connexion:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>10000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
1
OG Sean

Je me débattais avec le même genre de problème. La seule différence est que je voulais extraire un fichier avec Ajax de mon S3 et le charger sur un site. 

Après beaucoup de recherches, j'ai fini par ajouter cette option à ma demande Ajax.

xhrFields: {withCredentials: true},

Travaillé comme un charme, tant que vous avez la configuration CORSC pour tout autoriser.

j'espère que ça aide.

1
Richard Hazelden

C'est mon conseil de: https://github.com/mozilla/pdf.js/issues/3150

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
    </CORSRule>
</CORSConfiguration>
0
sev

Pour les personnes aux prises avec ce problème, comme d’autres le disent, vous devez forcer S3 à répondre avec des en-têtes CORS en ajoutant ces lignes à votre configuration CORS:

<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>

MAIS, vous devez ensuite effacer le cache de votre navigateur car les anciens en-têtes de la ressource demandée sont stockés. Dans Chrome, recherchez l'option Effacer les données de navigation, puis choisissez d'effacer le cache file. Un rechargement dur ne supprimera pas certains fichiers. Si vous préférez effacer le cache de fichiers uniquement pour le site actuel, cette réponse explique comment procéder.

Ce fut le gotcha pour moi.

0
treestompz