En la fuente de origen ha sido bloqueado de la carga por el Cross-Origin Resource Sharing política

Estoy recibiendo el siguiente error en un par de navegadores google Chrome, pero no todos. No completamente seguro de cuál es el problema en este punto.

Fuente de origen ‘https://ABCDEFG.cloudfront.net‘ ha sido bloqueado de la carga por el Cross-Origin Resource Sharing política: No ‘Access-Control-Allow-Origin’ encabezado presente en el recurso solicitado. Origen ‘https://sub.domain.com‘ es, por tanto, no se permite el acceso.

Tengo el siguiente CORS de Configuración en S3

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

La solicitud

Remote Address:1.2.3.4:443
Request URL:https://abcdefg.cloudfront.net/folder/path/icons-f10eba064933db447695cf85b06f7df3.woff
Request Method:GET
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:abcdefg.cloudfront.net
Origin:https://sub.domain.com
Pragma:no-cache
Referer:https://abcdefg.cloudfront.net/folder/path/icons-e283e9c896b17f5fb5717f7c9f6b05eb.css
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36

Todas las demás solicitudes de Cloudfront/S3 funciona correctamente, incluyendo ficheros JS.

  • Estoy teniendo el mismo problema… empecé a notar que después de la actualización a chrome 37.0.2062.94
  • Después de actualizar el CORS de Configuración, he cambiado el nombre de los bienes y de las arreglé para conseguir que funcione. Así que 1) El CORS de Configuración que se aplica en la creación del archivo (no actualización) O 2) el CORS de Configuración se almacena en caché en Cloudfront. Voy a publicar esto como una respuesta si otros pueden confirmar que funciona para ellos también.
  • Acabo de notar esto con Chrome v. 37.0.2062.94 pero no una versión anterior. No tengo un CORS de configuración a todos en el S3, así que esto no debería estar pasando, ¿verdad?
  • Tengo este problema ahora – ¿cuáles son sus recomendaciones para una solución?
  • usted necesita el derecho CORS config. Prueba en firefox y que le dará la (probablemente) el mismo resultado.
  • solución mediante la adición de la correcta CORS config para S3 (o si la creación automática de la CDN de la fuente, entonces es un poco más complicado-se han de añadir las cabeceras correspondientes, luego invalidar su caché de fuentes)… stackoverflow.com/questions/12229844/…, véase la respuesta a continuación para obtener más detalles
  • Es 2015 y solo tengo este problema.

InformationsquelleAutor Dallas Clark | 2014-08-30

10 Kommentare

  1. 83

    Agregar esta regla a su .htaccess

    Header add Access-Control-Allow-Origin "*" 
    

    aún mejor, como sugerido por @david thomas, usted puede utilizar un dominio determinado valor, por ejemplo,

    Header add Access-Control-Allow-Origin "your-domain.com"
    
    • Hola, ¿cuál es la diferencia con Header set Access-Control-Allow-Origin "*" ? Gracias
    • para usuarios de windows, set <add name=»Access-Control-Allow-Origin» value=»*» /> en <customHeaders> en la web.archivo de configuración. Que tengan un buen día
    • la diferencia es que con «add», en el encabezado de respuesta se agrega al conjunto existente de los encabezados, incluso si el encabezado ya existe. Esto puede resultar en dos (o más) de las cabeceras de tener el mismo nombre; mientras que con el «conjunto» en el encabezado de respuesta se establece, en sustitución de cualquiera de las anteriores encabezado con este nombre. En este caso es la misma causa * incluye todos ellos.
    • Gracias por la buena info!
    • Sólo señalar Access-Control-Allow-Origin "*" es potencialmente insegura como se abre el dominio de javascript acceso desde cualquier dominio. Usted debe usar un dominio específico valor en su lugar, e.g Access-Control-Allow-Origin "http://example1.com" Véase también stackoverflow.com/a/10636765/583715 para una buena explicación.
    • Muchas gracias, funciona en mi host!

  2. 57

    Chrome desde ~/Sep /Oct 2014 hace que las fuentes sujetas a la misma CORS comprueba como Firefox ha hecho https://code.google.com/p/chromium/issues/detail?id=286681. Hay un debate sobre esto en https://groups.google.com/a/chromium.org/forum/?fromgroups=#!tema/blink-dev/TT9D5-Zfnzw

    Dado que para las fuentes del navegador puede hacer un comprobación, luego el S3 política las necesidades de los cors el encabezado de la solicitud, así. Usted puede consultar su página en Safari (que en la actualidad no CORS la comprobación de las fuentes) y Firefox (que lo hace) para corroborar este es el problema descrito.

    Ver desbordamiento de la Pila de respuesta en Amazon S3 CORS (Cross-Origin Resource Sharing) y Firefox cruz-dominio de la carga de fuentes para el Amazon S3 CORS detalles.

    NB en general, debido a esto se utiliza para aplicar a Firefox, lo que puede ayudar a la búsqueda de Firefox en lugar de Chrome.

    • Gracias por esta respuesta, parece que puede ser un problema para muchos otros. A pesar de que mi problema era que ocurren en una versión estable de Chrome.
    • Esto está sucediendo en Chrome ahora.
    • Como la gente continuamente (incluso a mí mismo!) a esta respuesta, que me he hecho menos histórico y más relevantes de la actualidad.
    • También FYI descubrí que un mensaje de error «ha sido bloqueado de la carga por el Cross-Origin Resource Sharing política: No ‘Access-Control-Allow-Origin’ encabezado presente en el recurso solicitado. Origen», la verdad que ver con tener una mala ruta de acceso a un archivo de fuente en mi servidor original, y cloudfront, a continuación, redirigir a la página de inicio de mi servidor (y la respuesta de redirección o la página de inicio no tiene el CORS encabezados). Confuso, pero resuelto mediante el uso de la ruta de acceso correcta para el real archivo de fuente (no un CORS problema, estrictamente hablando).
    • Hey @DallasClark, puede que desee elegir aceptado la respuesta para su pregunta. Gracias Tim, sus enlaces y explicaciones han sido muy útiles en mi experiencia. Saludos.
  3. 44

    Yo era capaz de resolver el problema mediante la adición de <AllowedMethod>HEAD</AllowedMethod> para el CORS de la política de la S3.

    Ejemplo:

    <?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>
    
    • no estoy seguro acerca de la seguridad, sería bueno si alguien tenía alguna entrada en la que..
    • Doe este cambio necesita tiempo para que se propaguen? Acabo de añadir <AllowedMethod>HEAD</AllowedMethod> a mi CORS de la política en la cubeta y aún no funciona.
    • generalmente no, debe tener máximo. par de minutos
  4. 12

    El 26 de junio de 2014 AWS publicado adecuada Variar: el Origen de comportamiento en CloudFront así que ahora sólo le

    Establecer un CORS de Configuración para su S3:

    <AllowedOrigin>*</AllowedOrigin>
    

    En CloudFront -> Distribución -> Comportamientos de este origen, utilice el Avance de los Encabezados: la lista Blanca de la opción y la lista blanca el ‘Origen’ de cabecera.

    Esperar alrededor de 20 minutos, mientras que CloudFront se propaga la nueva regla

    Ahora su distribución CloudFront debe almacenar en caché las respuestas de diferentes (con la debida CORS encabezados) de cliente diferente Origen encabezados.

    • Esto no parece funcionar, ¿tienes más detalles? He habilitado esta pero todavía tengo exactamente el mismo problema.
  5. 4

    Lo único que me ha funcionado (probablemente porque tenía inconsistencias con www. de uso):

    Pega esto en tu .archivo htaccess:

    <IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
    </IfModule>
    <IfModule mod_mime.c>
    # Web fonts
    AddType application/font-woff woff
    AddType application/vnd.ms-fontobject eot
    
    # Browsers usually ignore the font MIME types and sniff the content,
    # however, Chrome shows a warning if other MIME types are used for the
    # following fonts.
    AddType application/x-font-ttf ttc ttf
    AddType font/opentype otf
    
    # Make SVGZ fonts work on iPad:
    # https://twitter.com/FontSquirrel/status/14855840545
    AddType     image/svg+xml svg svgz
    AddEncoding gzip svgz
    
    </IfModule>
    
    # rewrite www.example.com → example.com
    
    <IfModule mod_rewrite.c>
    RewriteCond %{HTTPS} !=on
    RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
    RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
    </IfModule>
    

    http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts

  6. 3

    Tuve este mismo problema y este enlace proporcionado la solución para mí:

    http://www.holovaty.com/writing/cors-ie-cloudfront/

    La versión corta de la misma es:

    1. Editar S3 CORS config (mi código de ejemplo no se muestran correctamente)

      Nota: Esto ya está hecho en la pregunta original

      Nota: el código que se proporciona no es muy seguro, más info en la página enlazada.
    2. Ir a los «Comportamientos» de la ficha de su distribución y haga clic en editar
    3. Cambio «hacia Adelante Encabezados» de «None (Mejora la memoria Caché)» a la «lista Blanca.»
    4. Agregar «Origen» a la «lista Blanca de los Encabezados de la lista de»
    5. Guardar los cambios

    Su cloudfront la distribución de la actualización, el cual tarda unos 10 minutos. Después de eso, todo debe ser bueno, puede verificar mediante la comprobación de que el CORS mensajes de error relacionados se han ido desde el navegador.

  7. 1

    Hay una buena valoración crítica aquí.

    Configurar esto en nginx/apache es un error.

    Si usted está usando una empresa de hosting no puede configurar el borde.

    Si usted está usando Docker, la aplicación debe ser autónomo.

    Tenga en cuenta que algunos ejemplos de uso de connectHandlers pero esto sólo conjuntos de encabezados en el doc. El uso de rawConnectHandlers se aplica a todos los activos servido (fonts/css/etc).

      //HSTS only the document - don't function over http.  
      //Make sure you want this as it won't go away for 30 days.
      WebApp.connectHandlers.use(function(req, res, next) {
        res.setHeader('Strict-Transport-Security', 'max-age=2592000; includeSubDomains'); //2592000s /30 days
        next();
      });
    
      //CORS all assets served (fonts/etc)
      WebApp.rawConnectHandlers.use(function(req, res, next) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        return next();
      });
    

    Este sería un buen momento para mirar navegador de la política como el encuadre, etc.

  8. 1

    Para los que utilizan productos de Microsoft con una web.archivo de configuración:

    Combinar esto con su web.config.

    Para permitir en cualquier dominio reemplazar value="domain" con value="*"

    <?xml version="1.0" encoding="utf-8" ?>
    <configuration>
      <system.webserver>
        <httpprotocol>
          <customheaders>
            <add name="Access-Control-Allow-Origin" value="domain" />
          </customheaders>
        </httpprotocol>
      </system.webserver>
    </configuration>
    

    Si usted no tiene permiso para editar la web.de configuración, a continuación, añadir esta línea en el código del lado del servidor.

    Response.AppendHeader("Access-Control-Allow-Origin", "domain");
    
  9. -5

    Solución de trabajo para heroku es aquí http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html
    (las citas de seguir):

    A continuación es exactamente lo que usted puede hacer si usted está ejecutando tu aplicación Rails en Heroku y con Cloudfront como la CDN. Fue probado en Ruby 2.1 + Rails 4, Heroku de Cedro de la pila.

    Agregar CORS encabezados HTTP (Control de Acceso-*) fuente activos

    • Añadir la gema font_assets a Gemfile .
    • bundle install
    • Agregar config.font_assets.origin = '*' a config/application.rb . Si desea un control más granular, puede agregar origen diferente de los valores distintos de medio ambiente, por ejemplo, config/config/environments/production.rb
    • curl -I http://localhost:3000/assets/your-custom-font.ttf
    • De inserción de código a Heroku.

    Configurar Cloudfront para adelante CORS encabezados HTTP

    De Cloudfront, seleccione su distribución, en «comportamiento» de la ficha, seleccione y edite la entrada que controla las fuentes de entrega (por mayoría simple aplicación Rails solo tiene 1 entrada aquí). Cambio Adelante Encabezados de «Ninguno» a «Whilelist». Y agregar los siguientes encabezados de la lista blanca:

    Access-Control-Allow-Origin
    Access-Control-Allow-Methods
    Access-Control-Allow-Headers
    Access-Control-Max-Age
    

    Guardar y ya está!

    Advertencia: he encontrado que a veces Firefox no no actualización de las fuentes, incluso si CORS de error se ha ido. En este caso, mantener la actualización de la página un par de veces para convencer a Firefox que usted está realmente determinado.

    • Por favor, evite link-sólo respuestas. Será útil si usted podría copiar fragmentos relevantes de el artículo enlazado en su respuesta. Gracias.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea