erreur CORS avec Three.js et S3 dans Chrome et Safari

Question

Je suis une issue du chargement d'un S3 hébergé JPG dans mon modèle Three.js comme une texture. J'ai eu une erreur CORS dans Chrome, j'ai réalisé que S3 supporte CORS et j'ai mis une politique très libérale pour le vérifier pendant le développement (je n'ai jamais rencontré CORS auparavant). Firefox va bien, mais Chrome et Safari continuent de faire des erreurs.

Le JPG est chargé dans une texture via THREE.ImageUtils.loadTexture(), puis que la texture est appliquée à un matériau.

J'ai essayé d'ajouter ce qui suit à l'image avant le chargement, mais il ne semble pas fonctionner:

img.crossOrigin = ''; 

La politique actuelle CORS j'est grand ouvert:

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <AllowedMethod>PUT</AllowedMethod> 
     <AllowedMethod>POST</AllowedMethod> 
     <AllowedMethod>HEAD</AllowedMethod> 
     <AllowedMethod>DELETE</AllowedMethod> 
    </CORSRule> 
</CORSConfiguration> 

erreur de Chrome est

38 Cross-origin image load denied by Cross-Origin Resource Sharing policy. 

Quelqu'un peut-il me donner des conseils à ce sujet?

MISE À JOUR:

Il se trouve que je n'étais pas fixer img.crossOrigin assez tôt dans le code pour qu'il soit utile. !. Erreur stupide :(

Les conseils AllowHeader sont utiles si, grâce

Answer 1

Essayez d'ajouter dans l'en-tête Content-

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <AllowedHeader>Content-*</AllowedHeader> 
    <AllowedHeader>Host</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration>