CORS issue No "Access-Control-Allow-Origin" header present on the requested resource
I have my fonts in a sub-area, for example static.example.com
Today fonts are not showing in Chrome as well as Firefox and this error appeared in dev tools:
"Font from source" http://static.example.com 'was blocked from loading due to Cross-Origin resource sharing policy: No' Access-Control- The Allow-Origin header is present on the requested resource. Origin ' http://example.com ' is therefore not allowed. "
I already have this code in .htaccess
file subdomain
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With"
Header set Access-Control-Allow-Methods "GET, PUT, POST"
</FilesMatch>
</IfModule>
Also if I try curl -I http://static.example.com/fonts/pfcentrosanspro-reg-webfont.eot
in terminal I get this answer:
HTTP/1.1 200 OK
Server: nginx
Date: Wed, 27 Aug 2014 17:20:50 GMT
Content-Type: font/eot
Content-Length: 26403
Connection: keep-alive
X-Accel-Version: 0.01
Last-Modified: Mon, 05 Aug 2013 17:49:42 GMT
Accept-Ranges: bytes
Cache-Control: max-age=31536000
Expires: Thu, 27 Aug 2015 17:20:50 GMT
X-Powered-By: PleskLin
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With
Access-Control-Allow-Methods: GET, PUT, POST
But the error persists, I moved the fonts to the bucket in Amazon S3 CDN with this code:
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://example.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
</CORSRule>
</CORSConfiguration>
No luck, the error still exists - fonts are not loading and a CORS error is displayed, I even modified the Nginx config file with no results!
Am I doing something wrong? It drives me crazy.
Site - Wordpress blog with W3 Total Caché plugin
Thanks for your help!
source to share
Some browsers don't like this:
Access-Control-Allow-Origin *
You must set this to the domain of the request being sent. I've struggled a lot with similar issues and finally landed on the bottom solution (PHP, but you get the idea).
$origin=isset($_SERVER['HTTP_ORIGIN'])?$_SERVER['HTTP_ORIGIN']:$_SERVER['HTTP_HOST'];
header('Access-Control-Allow-Origin: '.$origin);
header('Access-Control-Allow-Methods: POST, OPTIONS, GET, PUT');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers: Authorization, X-Requested-With');
header('P3P: CP="NON DSP LAW CUR ADM DEV TAI PSA PSD HIS OUR DEL IND UNI PUR COM NAV INT DEM CNT STA POL HEA PRE LOC IVD SAM IVA OTC"');
header('Access-Control-Max-Age: 1');
This code will accept all requests from all domains. It might not be safe. You probably want to check for whitelisting requests for accepted domains.
source to share