Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy

Question

I m receiving the following error on a couple of Chrome browsers but not all  Not sure entirely what the issue is at this point      Font from origin  https   ABCDEFG cloudfront net  has been blocked from loading by Cross-Origin Resource Sharing policy  No  Access-Control-Allow-Origin  header is present on the requested resource  Origin  https   sub domain com  is therefore not allowed access    I have the following CORS Configuration on S3   lt CORSConfiguration gt    lt CORSRule gt      lt AllowedOrigin gt   lt  AllowedOrigin gt      lt AllowedHeader gt   lt  AllowedHeader gt      lt AllowedMethod gt GET lt  AllowedMethod gt    lt  CORSRule gt   lt  CORSConfiguration gt    The request  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   All other requests from Cloudfront S3 work properly  including JS files

User · Answer

On June 26  2014 AWS released proper Vary  Origin behavior on CloudFront so now you just  Set a CORS Configuration for your S3 bucket    lt AllowedOrigin gt   lt  AllowedOrigin gt    In CloudFront -  Distribution -  Behaviors for this origin  use the Forward Headers  Whitelist option and whitelist the  Origin  header   Wait for  20 minutes while CloudFront propagates the new rule  Now your CloudFront distribution should cache different responses  with proper CORS headers  for different client Origin headers

User · Answer

Chrome since  Sep Oct 2014 makes fonts subject to the same CORS checks as Firefox has done https   code google com p chromium issues detail id 286681  There is a discussion on this in https   groups google com a chromium org forum  fromgroups   topic blink-dev TT9D5-Zfnzw  Given that for fonts the browser may do a preflight check  then your S3 policy needs the cors request header as well  You can check your page in say Safari  which at present doesn t do CORS checking for fonts  and Firefox  that does  to double check this is the problem described    See Stack overflow answer on Amazon S3 CORS  Cross-Origin Resource Sharing  and Firefox cross-domain font loading for the Amazon S3 CORS details   NB in general because this used to apply to Firefox only  so it may help to search for Firefox rather than  Chrome

User · Answer

Add this rule to your  htaccess  Header add Access-Control-Allow-Origin        even better  as suggested by  david thomas  you can use a specific domain value  e g   Header add Access-Control-Allow-Origin  your-domain com

User · Answer

If you want to allow all the fonts from a folder for a specific domain then you can use this     lt location path  quot assets font quot  gt       lt system webServer gt         lt httpProtocol gt           lt customHeaders gt             lt add name  quot Access-Control-Allow-Origin quot  value  quot http   localhost 3000 quot    gt           lt  customHeaders gt         lt  httpProtocol gt       lt  system webServer gt     lt  location gt   where assets font is the location where all fonts are and http   localhost 3000 is the location which you want to allow

User · Answer

For those using Microsoft products with a web config file   Merge this with your web config      To allow on any domain replace value  domain  with value        lt  xml version  1 0  encoding  utf-8    gt   lt configuration gt     lt system webserver gt       lt httpprotocol gt         lt customheaders gt           lt add name  Access-Control-Allow-Origin  value  domain    gt         lt  customheaders gt       lt  httpprotocol gt     lt  system webserver gt   lt  configuration gt    If you don t have permission to edit web config  then add this line in your server-side code   Response AppendHeader  Access-Control-Allow-Origin    domain

User · Answer

Just add use of origin in your if you use node js as server        like this     app use  req  res  next    gt      res header  Access-Control-Allow-Origin           next             We Need response for origin

User · Answer

Nginx   location       eot ttf woff        add header Access-Control-Allow-Origin          AWS S3    Select your bucket Click properties on the right top Permisions    Edit Cors Configuration    Save Save   http   schock net articles 2013 07 03 hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors

User · Answer

There is a nice writeup here   Configuring this in nginx apache is a mistake  If you are using a hosting company you can t configure the edge  If you are using Docker  the app should be self contained   Note that some examples use connectHandlers but this only sets headers on the doc   Using rawConnectHandlers applies to all assets served  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            This would be a good time to look at browser policy like framing  etc

User · Answer

I was able to solve the problem by simply adding  lt AllowedMethod gt HEAD lt  AllowedMethod gt  to the CORS policy of the S3 Bucket   Example    lt  xml version  1 0  encoding  UTF-8   gt   lt CORSConfiguration xmlns  http   s3 amazonaws com doc 2006-03-01   gt   lt CORSRule gt       lt AllowedOrigin gt   lt  AllowedOrigin gt       lt AllowedMethod gt GET lt  AllowedMethod gt       lt AllowedMethod gt HEAD lt  AllowedMethod gt       lt MaxAgeSeconds gt 3000 lt  MaxAgeSeconds gt       lt AllowedHeader gt Authorization lt  AllowedHeader gt   lt  CORSRule gt   lt  CORSConfiguration gt

User · Answer

The only thing that has worked for me  probably because I had inconsistencies with www  usage    Paste this in to your  htaccess file    lt IfModule mod headers c gt   lt FilesMatch     eot font css otf ttc ttf woff    gt      Header set Access-Control-Allow-Origin      lt  FilesMatch gt   lt  IfModule gt   lt IfModule mod mime c gt    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   lt  IfModule gt     rewrite www example com   example com   lt IfModule mod rewrite c gt  RewriteCond   HTTPS    on RewriteCond   HTTP HOST   www         NC  RewriteRule   http    1  REQUEST URI   R 301 L   lt  IfModule gt    http   ce3wiki theturninggate net doku php id cross-domain issues broken web fonts

User · Answer

Working solution for heroku is here http   kennethjiang blogspot com 2014 07 set-up-cors-in-cloudfront-for-custom html  quotes follow    Below is exactly what you can do if you are running your Rails app in Heroku and using Cloudfront as your CDN  It was tested on Ruby 2 1   Rails 4  Heroku Cedar stack   Add CORS HTTP headers  Access-Control-   to font assets   Add gem font assets to Gemfile   bundle install Add config font assets origin       to config application rb   If you want more granular control  you can add different origin values to different environment  e g   config config environments production rb curl -I http   localhost 3000 assets your-custom-font ttf Push code to Heroku    Configure Cloudfront to forward CORS HTTP headers  In Cloudfront  select your distribution  under  behavior  tab  select and edit the entry that controls your fonts delivery  for most simple Rails app you only have 1 entry here   Change Forward Headers from  None  to  Whilelist   And add the following headers to whitelist   Access-Control-Allow-Origin Access-Control-Allow-Methods Access-Control-Allow-Headers Access-Control-Max-Age   Save it and that s it   Caveat  I found that sometimes Firefox wouldn t not refresh the fonts even if CORS error is gone  In this case keep refreshing the page a few times to convince Firefox that you are really determined

User · Answer

I had this same problem and this link provided the solution for me   http   www holovaty com writing cors-ie-cloudfront   The short version of it is    Edit S3 CORS config  my code sample didn t display properly  Note  This is already done in the original question Note  the code provided is not very secure  more info in the linked page  Go to the  Behaviors  tab of your distribution and click to edit Change  Forward Headers  from    None  Improves Caching     to    Whitelist     Add    Origin    to the  Whitelist Headers  list Save the changes   Your cloudfront distribution will update  which takes about 10 minutes  After that  all should be well  you can verify by checking that the CORS related error messages are gone from the browser

User · Answer

For AWS S3  setting the Cross-origin resource sharing  CORS  to the following worked for me                   quot AllowedHeaders quot                  quot Authorization quot                      quot AllowedMethods quot                  quot GET quot                quot HEAD quot                      quot AllowedOrigins quot                  quot   quot                      quot ExposeHeaders quot

[amazon-web-services] Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy

Examples related to amazon-web-services

Examples related to amazon-s3

Examples related to cors

Examples related to amazon-cloudfront