95 votes

Configuration correcte de S3 + Cloudfront CORS ?

Mon application stocke les images sur S3, puis les transmet par proxy via Cloudfront. Je suis impatient d'utiliser la nouvelle prise en charge CORS de S3 pour pouvoir utiliser les méthodes de canevas HTML5 (qui ont une politique d'origine croisée), mais je n'arrive pas à configurer correctement mon S3 et mon Cloudfront. Je rencontre toujours le problème "Uncaught Error : SECURITY_ERR : DOM Exception 18" lorsque j'essaie de convertir une image en élément canvas.

Voici ce que j'ai pour l'instant :

S3

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>MY_WEBSITE_URL</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  <CORSRule>
    <AllowedOrigin>MY_CLOUDFRONT_URL</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    </CORSRule>
  </CORSConfiguration>

Cloudfront

Origines

Origin Protocol Policy: Match Viewer

HTTP Port: 80

HTTPS Port: 443

Comportements

Origin: MY_WEBSITE_URL

Object Caching: Use Origin Cache Headers

Forward Cookies: None

Forward Query Strings: Yes

Il y a quelque chose qui m'échappe ?

UPDATE : Je viens d'essayer de changer les en-têtes en

<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>

sur la base de cette question Amazon S3 CORS (Cross-Origin Resource Sharing) et le chargement de polices inter-domaines de Firefox

Toujours rien.

MISE À JOUR : PLUS D'INFORMATIONS SUR DEMANDE

Request
URL:https://d1r5nr1emc2xy5.cloudfront.net/uploaded/BAhbBlsHOgZmSSImMjAxMi8wOS8xMC8xOC81NC80Mi85NC9ncmFzczMuanBnBjoGRVQ/32c0cee8
Request Method:GET
Status Code:200 OK (from cache)

UPDATE

Je pense que ma requête n'était peut-être pas correcte, j'ai donc essayé d'activer CORS avec

img.crossOrigin = '';

mais ensuite l'image ne se charge pas et je reçois l'erreur : Le chargement d'une image d'origine croisée est refusé par la politique de partage des ressources d'origine croisée.

2voto

Jaqenhghar Points 416

Je ne suis pas tout à fait sûr de la nature de votre problème, mais.. :

https://forums.aws.amazon.com/thread.jspa?messageID=377513

a répondu à certains de mes problèmes avec CORS, S3 et Cloudfront.

J'ai également constaté que certaines ressources d'un même panier étaient renvoyées avec les bons en-têtes CORS et d'autres non. Après avoir invalidé les ressources, elles revenaient toutes avec des en-têtes corrects. Je ne sais pas pourquoi il fallait invalider certaines ressources et pas d'autres, car elles ont été téléchargées en même temps, avec le même type et le même seau.

0voto

Evgalak Points 31

Une raison supplémentaire pour CORS Les erreurs pourraient être les suivantes HTTP vers HTTPS la redirection configurée dans CloudFront.

Selon la documentation les redirections vers une origine différente ne sont pas autorisées dans les demandes CORS .

Par exemple, si vous essayez d'accéder à une certaine URL http://example.com qui a la règle cloudfront pour rediriger HTTP vers HTTPS, vous obtiendrez une erreur CORS, car https ://cloudfront.url est considéré par le navigateur comme une origine différente.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed

0voto

Quincy Points 448

J'ai suivi la documentation d'AWS :

Puis j'ai utilisé aws cdk pour le faire pour moi. Source complète ici : https://github.com/quincycs/quincymitchell.com

const myBucket = new Bucket(this, 'bucket', {
  bucketName: `prod-${domainName}`,
  cors: [{
    allowedMethods: [HttpMethods.GET],
    allowedOrigins: ['*'],
    allowedHeaders: ['*']
  }],
  enforceSSL: true,
  blockPublicAccess: BlockPublicAccess.BLOCK_ALL,
  removalPolicy: RemovalPolicy.RETAIN
});
const mycert = Certificate.fromCertificateArn(this, 'certificate', ssmCertArn);

new Distribution(this, 'myDist', {
  defaultBehavior: {
    origin: new S3Origin(myBucket),
    viewerProtocolPolicy: ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
    originRequestPolicy: OriginRequestPolicy.CORS_S3_ORIGIN,
    responseHeadersPolicy: ResponseHeadersPolicy.CORS_ALLOW_ALL_ORIGINS,
    allowedMethods: AllowedMethods.ALLOW_GET_HEAD_OPTIONS, // needed for cors
    cachedMethods: CachedMethods.CACHE_GET_HEAD_OPTIONS, // needed for cors
  },
  defaultRootObject: 'index.html',
  domainNames: [domainName, `www.${domainName}`],
  certificate: mycert
});

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X