Question

我想从CDN加载Fontawesome但我得到了

failed cross-origin request. Resource access is restricted

我知道要解决这个问题，应该添加一个HTTP标头，但是有什么方法可以避免这样做吗？

我试过替换 '../font/fontawesome-webfont.eot?v=3.2.0') 有完整的网址，但由于某种原因它没有帮助。没有标题可以做什么吗？

Answer 1

这是浏览器的同源策略限制http://www.w3.org/TR/css3-fonts/#same-origin-restriction。

如果您使用的是亚马逊s3，这可以帮助您Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

Answer 2

您的CDN需要在字体文件的响应中包含Access-Control-Allow-Origin:*标头。请参阅我对Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue

的回答

Answer 3

您必须使用此文本在字体文件夹上创建.htaccess文件。

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

Answer 4

CORS配置

<?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>

Fontawesome Cross起源问题

4 个答案: