I have a website which uses font-awesome and I want to use cloudfront as the CDN(my website runs on apache). I have enabled cors in the conf file for this site.
Here is the conf file for my site:
<VirtualHost *:80>
ServerAdmin ajaydarez@gmail.com
ServerName spotlessmommy.com
ServerAlias www.spotlessmommy.com
DocumentRoot /var/www/spotlessmommy
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /var/www/spotlessmommy>
Options Indexes FollowSymLinks MultiViews
AllowOverride ALL
Order allow,deny
allow from all
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</Directory>
I am getting the right header passed through when I try it with curl -
E:\Software Files\curl>curl -I spotlessmommy.com/wp-content/themes/sociallyviral
/fonts/fontawesome-webfont.ttf
HTTP/1.1 200 OK
Date: Tue, 08 Sep 2015 01:04:00 GMT
Server: Apache/2.4.7 (Ubuntu)
Last-Modified: Fri, 29 May 2015 19:46:10 GMT
ETag: "228fc-5173dba530480"
Accept-Ranges: bytes
Content-Length: 141564
Access-Control-Max-Age: 1000
Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Authorizat
ion, Accept, Client-Security-Token, Accept-Encoding
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT
Vary: User-Agent
Access-Control-Allow-Origin: *
E:\Software Files\curl>curl -I spotlessmommy.com
HTTP/1.1 200 OK
Date: Tue, 08 Sep 2015 01:04:03 GMT
Server: Apache/2.4.7 (Ubuntu)
X-Powered-By: PHP/5.5.9-1ubuntu4.11
X-Pingback: http://spotlessmommy.com/xmlrpc.php
Access-Control-Max-Age: 1000
Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Authorizat
ion, Accept, Client-Security-Token, Accept-Encoding
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT
Vary: User-Agent
Content-Type: text/html; charset=UTF-8
But in the browser, I am still getting the cross-origin error for the font file. The site is www.spotlessmommy.com (if you load the site, you can see that the social media icons are just empty boxes)
Font from origin 'http://d13wghwkc7ps4m.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 'http://spotlessmommy.com' is therefore not allowed access.
Any idea on what else I should try? Been struggling with this for the past 14 hours now :(
