Fontawesome Cross origin issues

问题:

I want to load Fontawesome from a CDN but I get

failed cross-origin request. Resource access is restricted

I know that to fix this a HTTP header should be added, but is there any way to avoid doing this?

I tried replacing '../font/fontawesome-webfont.eot?v=3.2.0') with full urls but it didnt help for some reason. Is there anything that can be done without the header?

回答1:

This is browsers’ same-origin policy restrictions http://www.w3.org/TR/css3-fonts/#same-origin-restriction.

If you are using amazon s3 this could help you Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

回答2:

Your CDN needs to include the Access-Control-Allow-Origin:* header in the response for the font files. See my answer to Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue

回答3:

You have to create .htaccess file on font folder with this text.

<FilesMatch ".(eot|ttf|svg|otf|woff|woff2)">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

回答4:

CORS Configuration

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
      <AllowedOrigin>http://www.your-site.com</AllowedOrigin>
       <AllowedOrigin>https://www.your-site.com</AllowedOrigin>
       <AllowedMethod>GET</AllowedMethod>
       <AllowedMethod>HEAD</AllowedMethod>
       <AllowedMethod>DELETE</AllowedMethod>
       <AllowedMethod>PUT</AllowedMethod>
       <AllowedMethod>POST</AllowedMethod>
     </CORSRule>
</CORSConfiguration>