amazon-s3 - name - consola de administración aws

S3-Encabezado de acceso-control-permiso-origen

Question

¿Alguien logró agregar Access-Control-Allow-Origin a 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: *

La configuración de mi 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 encabezado de respuesta de Origin .

Answer 1

Esta es una manera simple de hacer que esto funcione.

Sé que esta es una vieja pregunta, pero todavía 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.

crossorigin: "anonymous" solicitar su imagen utilizando el crossorigin: "anonymous" .

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

Agregue la URL de su sitio a CORS en AWS S3. Here hay una referencia de Amazon sobre eso. Basta con ir a su cubo y seleccionar " Propiedades " en las pestañas de la derecha, abrir la pestaña " Permisos " y luego hacer clic en " Editar configuración CORS ".

Originalmente, tenía < AllowedOrigin> establecido en * . 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 busca.

Answer 2

1. Establezca la configuración de CORS en la configuración de Permisos para su cubo 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 encabezado Origin .

3. CloudFront no reenvía el encabezado de Origin de forma predeterminada

   Necesita incluir en la lista blanca el encabezado Origin en la configuración de comportamiento de su distribución de CloudFront.

Answer 3

@jordanstephens dijo esto en un comentario, pero se perdió y fue una solución realmente 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>

Answer 4

Añadiré a esta respuesta anterior que resolvió mi problema.

Para configurar el punto de distribución AWS / CloudFront para torcer el encabezado de origen CORS, 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 los Encabezados de la Lista blanca de Ninguno a Lista blanca, luego asegúrese de que Origin se haya agregado al cuadro de la lista blanca.

Answer 5

En la última versión de S3 Management Console, al hacer clic en la configuración de CORS en la pestaña Permisos, se mostrará una configuración CORS muestra predeterminada. ¡Esta configuración no está realmente activa, sin embargo! Primero debe hacer clic en guardar para activar CORS.

Me tomó demasiado tiempo resolver esto, con suerte esto le ahorrará a alguien algo de tiempo.

Answer 6

Estaba teniendo problemas similares cargando modelos 3D de S3 en un visor 3D de JavaScript (3D HOP), pero, por extraño que parezca, solo con ciertos tipos de archivos (.nxs).

Lo que lo solucionó fue cambiar el AllowedHeader de AllowedHeader de la Authorization predeterminada a * en la configuración de 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>

Answer 7

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

Simplemente hice clic en guardar y funcionó, mis fuentes web personalizadas se cargaban en IE y Firefox. No soy un experto en esto, solo pensé que esto podría ayudarte.

Answer 8

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

1. Como lo sugirió Flavio; agregue la configuración de 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ás usando.

Answer 9

Llegué a este hilo y ninguna de las soluciones anteriores resultó aplicable a mi caso. Resulta que simplemente tuve que eliminar una barra inclinada en la configuración de CORS de mi contenedor.

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 algo de tirones de pelo.

Answer 10

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> está funcionando y <AllowedHeader>Authorization</AllowedHeader> no?

Answer 11

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

La <CORSConfiguration> viene con algunos valores predeterminados. Eso es todo lo que necesitaba para resolver tu problema. Simplemente haga clic en "Guardar" y vuelva a intentar para ver si funcionó. Si no es así, también puedes probar el siguiente código (de la respuesta alxrb) 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>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration> 

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

Answer 12

Si su solicitud no especifica un encabezado de Origin , S3 no incluirá los encabezados de CORS en la respuesta. Esto realmente me tiró porque seguí tratando de curvar los archivos para probar los CORS, pero Curl no incluye Origin .

Answer 13

Ver respuestas anteriores. (Pero yo también tenía un error de Chrome)

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

En mi caso, cargué imágenes y las visualicé 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 guardado en caché otra versión y NUNCA intentó volver a buscar la versión crossorigin (incluso si yo estaba usando crossorigin en las imágenes mostradas.

Para solucionarlo, agregué ?crossorigin al final de la url de la imagen (pero podrías agregar ?blah , es arbitrario cambiar el estado del caché) cuando lo cargué para el lienzo. Avísame si encuentras una solución mejor para CHROME

Answer 14

fwuensche "respuesta" está correlacionada para configurar un CDN; al hacer esto, eliminé MaxAgeSeconds.

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