Cross-Origin Resource Sharing policy Font

Question

I am using W3 Total Cache with Amazon cloudfront. I have in my htaccess file:

# BEGIN W3TC CDN
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
# END W3TC CDN 

But still getting error:

Font from origin 'https://example.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://www.example.com' is therefore not allowed access.

Why is this happening?

Answer 1

Found the solution in this link: https://www.naschenweng.info/2014/09/23/wordpress-w3-total-cache-cloudfront-font-cors-issue/.

You need to change the CloudFront distribution's behaviors settings:

• Change “Forward Headers” from “None” to “Whitelist”
• Add “Origin” to the “Whitelist Headers”
• Make sure that “Use Origin Cache Headers” is checked

Then invalidate the cached fonts.

Answer 2

Wrestling with this for days, and think I finally fixed it. Here are some things to check:

• The webserver config should add the proper header. Apache syntax is listed in the question. Here's Nginx syntax that I used:

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

• Within W3TC > Performance > CDN > Custom File List, I added the following to upload the actual font files:

{plugins_dir}/*.ttf {plugins_dir}/*.woff

• While you're there, set the Theme file types to upload to the following. Per @Yao's link, the default separators are inconsistent (should all be semicolons, not commas)

*.css;*.js;*.gif;*.png;*.jpg;*.ico;*.ttf;*.otf;*.woff;*.less

• In S3 > Permissions > CORS Configuration, change the default

<AllowedHeader>Authorization</AllowedHeader> to: <AllowedHeader>*</AllowedHeader> You should start seeing the necessary Access-Control-Allow-Origin header in the response.

• In CloudFront > Distribution > Behaviors, make the following changes:

  1. Change Allowed HTTP Methods to GET, HEAD, OPTIONS (you need OPTIONS)
  2. Change Forward Headers to Whitelist
  3. Under Whitelist Headers, Add >> Origin

• To test:

curl -I -s -X GET -H "Origin: www.example.com" https://abcdefg543210.cloudfront.net/wp-content/path/to/foo.ttf

This should give you back the following header:

Access-Control-Allow-Origin: * X-Cache: Miss from cloudfront

I found this blog post to be pretty helpful: http://blog.celingest.com/en/2014/10/02/tutorial-using-cors-with-cloudfront-and-s3/