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

问题:

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

**GET

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.

回答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"

回答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.

回答3:

I was able to solve the problem by simply adding HEAD to the CORS policy of the S3 Bucket.

Example:

*GETHEAD3000Authorization

回答4:

Nginx:

location ~* \.(eot|ttf|woff)$ {    add_header Access-Control-Allow-Origin '*'; }

AWS S3:

1. Select your bucket
2. Click properties on the right top
3. Permisions => Edit Cors Configuration => Save
4. Save

http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/

回答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:

*

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.

回答6:

The only thing that has worked for me (probably because I had inconsistencies with www. usage):

Paste this in to your .htaccess file:

     Header set Access-Control-Allow-Origin "*"  # 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    # rewrite www.example.com → example.com   RewriteCond %{HTTPS} !=on RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]

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

回答7:

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:

1. 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.
2. Go to the "Behaviors" tab of your distribution and click to edit
3. Change "Forward Headers" from “None (Improves Caching)” to “Whitelist.”
4. Add “Origin” to the "Whitelist Headers" list
5. 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.

回答8:

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.

回答9:

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="*"

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");

回答10:

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.

转载请标明出处:Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy

文章来源: Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy