S3 - Encabezado de acceso-control-permitir-origen

¿Alguien logró agregar Access-Control-Allow-Origina los encabezados de respuesta? Lo que necesito es algo como esto:

<img src="http://360assets.s3.amazonaws.com/tours/8b16734d-336c-48c7-95c4-3a93fa023a57/1_AU_COM_180212_Areitbahn_Hahnkoplift_Bergstation.tiles/l2_f_0101.jpg" />

Esta solicitud de obtención debe contener en la respuesta, encabezado, Access-Control-Allow-Origin: *

Mi configuración CORS para el cubo se ve así:

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

Como es de esperar, no hay Originencabezado de respuesta.

Por lo general, todo lo que necesita hacer es "Agregar configuración CORS" en las propiedades de su depósito.

El <CORSConfiguration>viene con algunos valores predeterminados. Eso es todo lo que necesitaba para resolver tu problema. Simplemente haga clic en "Guardar" e intente nuevamente para ver si funcionó. Si no es así, también puede probar el siguiente código (de alxrb answer) que parece haber funcionado para la mayoría de las personas.

<?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>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration> 

Para obtener más información, puede leer este artículo sobre Edición de permisos de depósito .

Estaba teniendo un problema similar con la carga de fuentes web, cuando hice clic en 'agregar configuración CORS', en las propiedades del depósito, este código ya estaba allí:

<?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>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration> 

Acabo de hacer clic en Guardar y funcionó de maravilla, mis fuentes web personalizadas se cargaban en IE y Firefox. No soy un experto en esto, solo pensé que esto podría ayudarte.

Si su solicitud no especifica un Originencabezado, S3 no incluirá los encabezados CORS en la respuesta. Esto realmente me arrojó porque seguía tratando de rizar los archivos para probar el CORS pero curl no lo incluía Origin.

@jordanstephens dijo esto en un comentario, pero se pierde y fue una solución muy fácil para mí.

Simplemente agregué el método HEAD e hice clic en guardado y comenzó a funcionar.

<CORSConfiguration>
	<CORSRule>
		<AllowedOrigin>*</AllowedOrigin>
		<AllowedMethod>GET</AllowedMethod>
		<AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
		<MaxAgeSeconds>3000</MaxAgeSeconds>
		<AllowedHeader>Authorization</AllowedHeader>
	</CORSRule>
</CORSConfiguration>

Esta es una manera simple de hacer que esto funcione.

Sé que esta es una vieja pregunta, pero aún es difícil encontrar una solución.

Para empezar, esto funcionó para mí en un proyecto construido con Rails 4, Paperclip 4, CamanJS, Heroku y AWS S3.

Tienes que solicitar tu imagen usando el crossorigin: "anonymous"parámetro.

    <img href="your-remote-image.jpg" crossorigin="anonymous"> 

Agregue la URL de su sitio a CORS en AWS S3. Aquí hay una referencia de Amazon sobre eso. Bastante, solo vaya a su bucket, y luego seleccione " Propiedades " de las pestañas a la derecha, abra la pestaña " Permisos " y luego, haga clic en " Editar configuración CORS ".

Originalmente, me había < AllowedOrigin>puesto a *. Simplemente cambie ese asterisco a su URL, asegúrese de incluir opciones como http://y https://en líneas separadas. Esperaba que el asterisco aceptara "Todos", pero aparentemente tenemos que ser más específicos que eso.

Así es como me parece.

Ver las respuestas anteriores. (pero también tuve un error de Chrome)

No cargue y muestre la imagen en la página en CROMO. (si luego va a crear una nueva instancia)

En mi caso, cargué imágenes y las mostré en la página. Cuando se hizo clic en ellos, creé una nueva instancia de ellos:

// there is already an html <img /> on the page, I'm creating a new one now
img = $('<img crossorigin />')[0]
img.onload = function(){
  context.drawImage(img, 0, 0)
  context.getImageData(0,0,w,h)
}
img.src = 'http://s3.amazonaws.com/my/image.png'; // I added arbitrary ?crossorigin to change the URL of this to fix it

Chrome ya había almacenado en caché otra versión y NUNCA intentó volver a buscar la crossoriginversión (incluso si estaba usando crossoriginlas imágenes mostradas.

Para solucionarlo, agregué ?crossoriginal final de la url de la imagen (pero podría agregar ?blah, es arbitrario cambiar el estado de la caché) cuando lo cargué para el lienzo. Avíseme si encuentra una mejor solución para CHROME

Solo agregaré a esta respuesta, arriba, que resolvió mi problema.

Para configurar AWS / CloudFront Distribution Point para desviar el encabezado CORS Origin, haga clic en la interfaz de edición para el punto de distribución:

Vaya a la pestaña de comportamientos y edite el comportamiento, cambiando "Caché basado en encabezados de solicitud seleccionados" de Ninguno a Lista blanca, luego asegúrese de Originagregarlo al cuadro de la lista blanca. Consulte Configuración de CloudFront para respetar la configuración de CORS en los documentos de AWS para obtener más información.

Estaba teniendo problemas similares al cargar modelos 3D desde S3 en un visor 3D de JavaScript (3D HOP), pero curiosamente solo con ciertos tipos de archivos (.nxs).

Lo que me solucionó fue cambiar AllowedHeaderde la configuración predeterminada Authorizationa *CORS:

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

Al igual que otros tienen estados, primero debe tener la configuración CORS en su bucket S3:

<CORSConfiguration>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Pero en mi caso después de hacer eso, todavía no funcionaba. Estaba usando Chrome (probablemente el mismo problema con otros navegadores).

El problema era que Chrome estaba almacenando en caché la imagen con los encabezados (sin contener los datos CORS) , por lo que no importaba lo que intentara cambiar en AWS, no vería mis encabezados CORS.

Después de borrar el caché de Chrome y volver a cargar la página , la imagen tenía los encabezados CORS esperados

Intenté todas las respuestas anteriores y nada funcionó. En realidad, necesitamos 3 pasos de las respuestas anteriores juntas para que funcione:

1. Como lo sugirió Flavio; agregue la configuración CORS en su cubo:

   <CORSConfiguration>
      <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
      </CORSRule>
    </CORSConfiguration>
   

2. En la imagen; mencionar crossorigin:

   <img href="abc.jpg" crossorigin="anonymous">
   

3. ¿Estás usando un CDN? Si todo funciona bien conectándose al servidor de origen pero NO a través de CDN; significa que necesita alguna configuración en su CDN como aceptar encabezados CORS. La configuración exacta depende de qué CDN esté utilizando.

Llegué a este hilo, y ninguna de las soluciones anteriores resultó aplicarse a mi caso. Resulta que simplemente tuve que eliminar una barra diagonal de la <AllowedOrigin>URL en la configuración CORS de mi bucket.

Falla:

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

Gana:

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

Espero que esto le ahorre a alguien algunos tirones de cabello.

1. Establezca la configuración de CORS en la configuración de permisos para su depósito S3

   <?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>Authorization</AllowedHeader>
       </CORSRule>
   </CORSConfiguration> 
   

2. S3 agrega encabezados CORS solo cuando la solicitud http tiene el Originencabezado.

3. CloudFront no reenvía el Originencabezado de forma predeterminada

   Debe incluir el Originencabezado de la lista blanca en la configuración de comportamiento para su distribución de CloudFront.

Lo arreglé escribiendo lo siguiente:

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

¿Por qué <AllowedHeader>*</AllowedHeader>funciona y <AllowedHeader>Authorization</AllowedHeader>no?

La "respuesta" de fwuensche es correcta para configurar una CDN; haciendo esto, eliminé MaxAgeSeconds.

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>

En la última consola de administración S3, cuando hace clic en la configuración CORS en la pestaña Permisos, mostrará una configuración CORS de muestra predeterminada. Sin embargo, esta configuración no está realmente activa. Primero debe hacer clic en guardar para activar CORS.

Me tomó demasiado tiempo darme cuenta, espero que esto ahorre algo de tiempo a alguien.

Esta configuración resolvió el problema para mí:

<?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>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Advertencia - Hack.

Si usa S3Image para mostrar una imagen y luego intenta obtenerla a través de fetch, tal vez para insertarla en un PDF o realizar algún otro procesamiento, tenga en cuenta que Chrome almacenará en caché el primer resultado que no requiere una solicitud de verificación previa CORS, y luego intente obtener el mismo recurso sin la solicitud OPTIONS de verificación previa para la búsqueda y fallará debido a restricciones del navegador.

Otra forma de evitar esto es asegurarse de que S3Image incluya crossorigin: 'use-credentials' como se mencionó anteriormente. En el archivo que usa S3Image, (tengo un componente que crea una versión en caché de S3Image, por lo que es el lugar perfecto para mí), anule el método imageEl prototipo de S3Image para forzarlo a incluir este atributo.

S3Image.prototype.imageEl = function (src, theme) {
    if (!src) {
        return null;
    }
    var selected = this.props.selected;
    var containerStyle = { position: 'relative' };
    return (React.createElement("div", { style: containerStyle, onClick: this.handleClick },
        React.createElement("img", { crossOrigin: 'use-credentials', style: theme.photoImg, src: src, onLoad: this.handleOnLoad, onError: this.handleOnError}),
        React.createElement("div", { style: selected ? theme.overlaySelected : theme.overlay })));
};

El problema 403 ya está resuelto. ¡Qué dolor aggrr!

<AllowedOrigin>*</AllowedOrigin>

no es una buena idea porque con * otorga a cualquier sitio web acceso a los archivos en su bucket. En su lugar, debe especificar qué origen está permitido exactamente para usar los recursos de su depósito. Por lo general, ese es su nombre de dominio como

<AllowedOrigin>https://www.example.com</AllowedOrigin>

o si desea incluir todos los subdominios posibles:

<AllowedOrigin>*.example.com</AllowedOrigin>

A continuación se muestra la configuración y está bien para mí. Espero que ayude a resolver su problema en AWS S3.

<?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>DELETE</AllowedMethod>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Primero, active CORS en su cubo S3. Use este código como guía:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

2) Si aún no funciona, asegúrese de agregar también un "origen cruzado" con un valor "*" a sus etiquetas img. Pon esto en tu archivo html:

  let imagenes = document.getElementsByTagName("img");
    for (let i = 0; i < imagenes.length; i++) {
      imagenes[i].setAttribute("crossorigin", "*");

La respuesta aceptada funciona, pero parece que si va directamente al recurso, entonces no hay encabezados de origen cruzado. Si está usando Cloudfront, esto hará que Cloudfront guarde en caché la versión sin encabezados. Cuando vaya a una URL diferente que cargue este recurso, obtendrá este problema de origen cruzado.

Si la configuración de CORS no te ayuda.

Verifique que la configuración S3 sea ​​correcta. Tenía un nombre de cubo no válido en Storage.configure. Usé un nombre corto de cubo y causó un error:

No hay encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado.

Por lo que vale, he tenido un problema similar: al intentar agregar un origen permitido específico (no *).

Resulta que tuve que corregir

<AllowedOrigin>http://mydomain:3000/</AllowedOrigin>

a

<AllowedOrigin>http://mydomain:3000</AllowedOrigin>

(tenga en cuenta el último slah en la URL)

Espero que esto ayude a alguien