Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy
Solution 1
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"
Solution 2
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.
Solution 3
I was able to solve the problem by simply adding <AllowedMethod>HEAD</AllowedMethod>
to the CORS policy of the S3 Bucket.
Example:
<?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>
Solution 4
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/
Solution 5
On June 26, 2014 AWS released proper Vary: Origin behavior on CloudFront so now you just
Set a CORS Configuration for your S3 bucket:
<AllowedOrigin>*</AllowedOrigin>
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.
Related videos on Youtube
Comments
-
Dallas Clark over 1 year
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
<CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedHeader>*</AllowedHeader> <AllowedMethod>GET</AllowedMethod> </CORSRule> </CORSConfiguration>
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.
-
kirley over 9 yearsI'm having the same problem... I started noticing it after upgrading to chrome 37.0.2062.94
-
Dallas Clark over 9 yearsAfter updating the CORS Configuration, I renamed the assets and managed to get it working. So either 1) The CORS Configuration is applied on file creation only (not update) OR 2) the CORS Configuration is cached at Cloudfront. I will post this as an answer if others can confirm it works for them too.
-
Ghopper21 over 9 yearsJust noticed this with Chrome v. 37.0.2062.94 but not an earlier version. I don't have a CORS configuration at all on S3, so this shouldn't be happening, right?
-
Richard Peck over 9 yearsGot this problem now - what are your recommendations for a fix?
-
Tim Diggins over 9 years@Ghopper21 you need the right CORS config. Test in firefox and that will give you the (probably) the same result.
-
Tim Diggins over 9 years@RichPeck - fix by adding the correct CORS config to S3 (or if automatically creating your CDN from source, then it's a bit more complicated -- you have to add the appropriate headers, then invalidate your cached fonts)... stackoverflow.com/questions/12229844/… see answer below for more details
-
Seto over 8 yearsIt's 2015 and I just got this problem.
-
-
Dallas Clark over 9 yearsThanks for this answer, looks like it may be a problem for many others. Although my problem was occurring in a stable build of Chrome.
-
justingordon over 9 yearsThis is happening in Chrome now.
-
Tim Diggins over 9 yearsAs people keep referring (including myself!) to this answer, I've made it less historical and more relevant to present day.
-
Tim Diggins over 9 yearsAlso FYI I discovered that a error message "has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin" was actually to do with having a bad path to a font file in my original server, and cloudfront then redirecting to the homepage of my server (and either the redirect response or the homepage didn't have the CORS headers). Confusing, but solved by using the correct path to the actual font file (not a CORS issue, strictly speaking).
-
NineCattoRules about 9 yearsHi, what's the difference with
Header set Access-Control-Allow-Origin "*"
? Thanks -
Dan about 9 yearsHey @DallasClark, you may want to choose an accepted answer for your question. Thanks Tim, your links and explanations were helpful in my experience. Cheers.
-
Arsalan Saleem about 9 yearsfor windows people, set <add name="Access-Control-Allow-Origin" value="*" /> under <customHeaders> in web.config file. Have a nice day
-
shaithana about 9 years@Simone the difference is that with "add" the response header is added to the existing set of headers, even if this header already exists. This can result in two (or more) headers having the same name; whereas with "set" the response header is set, replacing any previous header with this name. In this case is the same cause * includes them all.
-
NineCattoRules about 9 years@GiovanniDiGregorio Thanks for the nice info!
-
David Thomas almost 9 yearsJust noting
Access-Control-Allow-Origin "*"
is potentially insecure as it opens the domain to javascript access from any domain. You should use a specific domain value instead, e.gAccess-Control-Allow-Origin "http://example1.com"
See also stackoverflow.com/a/10636765/583715 for a good explanation. -
Jaco Pretorius almost 9 yearsThis doesn't seem to work, do you have more details? I enabled this but I still get exactly the same issue.
-
bPratik over 8 yearsPlease avoid link-only answers. It will be helpful if you could copy relevant snippets out of the linked article into your answer. Thanks.
-
neobie over 6 yearsafter adding this, get 404 not found.
-
Özer over 6 yearsnot sure about security though, would be nice if someone had some input on that..
-
Salvatore Iovene over 6 yearsDoe this change need time to propagate? I just added
<AllowedMethod>HEAD</AllowedMethod>
to my CORS policy on the bucket and it's still not working. -
Özer over 6 yearsusually no, it should take max. couple minutes
-
mohrtan over 4 yearsDeserves a vote up for remembering us Windows users.
-
Mohammed Moinuddin Waseem over 4 yearsSince your code was detailed, it took some time for me to go through it, I learned few things though. I applied portion of it to tweak my solution. It worked.
-
Yusuff Sodiq almost 4 yearsI'm using asp.net core, how do I add this to the appsettings.json file?
-
Tahir Yasin about 3 yearsYOU ARE MY LIFE SAVER !
-
andreas over 2 years"AllowedOrigins": ["*"] <--- this really hurts!
-
Webucator over 2 years@andreas, isn't this only a concern if you care if other sites load this content? Or is there something more risky here that I'm missing?
-
andreas over 2 yearsNot that I am aware of. But it's really bad practice and can bite you in unexpected costs if others utilize your images. In case you have CloudFront in front of your S3 buckets, this can get expensive.