amazon-web-services - origin - corsconfiguration s3

AWS S3+CloudFront genera errores CORS al publicar imágenes desde el caché del navegador

Question

Si borro la caché de mi navegador, todo lo que carga se encuentra solo en mi bucket S3 habilitado para la nube. Sin embargo, cuando apago el caché, aparece un error en la consola:

Se ha bloqueado la carga de la imagen del origen [URL ORIGEN] mediante la política de Intercambio de recursos de origen cruzado: No hay encabezado ''Control de acceso-Permitir-Origen'' presente en el recurso solicitado. Origen [MY LOCALHOST ADDRESS] no está permitido el acceso.

Configuración de MY 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>

También seguí este consejo hace un tiempo y cambié la configuración de distribución de cloundfront. Parecía haber funcionado en aquel entonces, pero definitivamente no funciona con la memoria caché del navegador ahora: problemas de CORS con Amazon S3 en los últimos Chomium y Google Canary

También intenté poner "Header add Access-Control-Allow-Origin" * "" en mis sitios web .htaccess. Sin suerte. Nota: mi sitio web está alojado y se accede desde localhost (es un entorno de desarrollo).

Answer 1

Estaba atrapado en el mismo problema y descubrí que exponer encabezados como se muestra a continuación resuelve el problema:

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>MYIP</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

Answer 2

Me encontré con el mismo tipo de problema: no se acerca el acceso-control-permiso-origen. Fue muy aleatorio, a veces funcionó, otras veces no. Finalmente lo reduje de esta manera:

1. Activado el alojamiento de sitios web S3
2. Probado para el encabezado CORS tanto en S3 como en CloudFront

Aquí es cómo probar fácilmente un encabezado CORS:

curl -i -H "Origin: http://YOUR-SITE-URL" http://S3-or-CLOUDFRONT-URL | grep Access

En mi caso, funcionaría bien en S3, pero en CloudFront solo algunas veces devolverá los encabezados de control de acceso:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000

Después de más investigaciones, descubrí que nuestra distribución de CloudFront estaba configurada para bloquear los encabezados que van a S3. Para arreglar esto:

1. Ir a la distribución de CloudFront en el panel de AWS
2. Haga clic en Configuración de distribución
3. Haga clic en la pestaña Comportamientos
4. Edite el comportamiento del patrón predeterminado
5. Haga clic en Adelante Encabezados y seleccione Lista blanca
6. Agregue los 3 encabezados sugeridos: Access-Control-Request-Headers, Access-Control-Request-Method, Origin
7. Guardar cambios

Una vez que los encabezados llegaron a S3, siempre pudimos ver la información de control de acceso correcta con el comando curl arriba.