我想从 CDN 加载 Fontawesome 但我得到了
failed cross-origin request. Resource access is restricted
我知道要解决这个问题,应该添加一个 HTTP 标头,但是有什么方法可以避免这样做吗?
我尝试用
'../font/fontawesome-webfont.eot?v=3.2.0')
完整的网址替换,但由于某种原因它没有帮助。没有标题有什么可以做的吗?
我想从 CDN 加载 Fontawesome 但我得到了
failed cross-origin request. Resource access is restricted
我知道要解决这个问题,应该添加一个 HTTP 标头,但是有什么方法可以避免这样做吗?
我尝试用
'../font/fontawesome-webfont.eot?v=3.2.0')
完整的网址替换,但由于某种原因它没有帮助。没有标题有什么可以做的吗?
您必须.htaccess
使用此文本在字体文件夹上创建文件。
<FilesMatch ".(eot|ttf|svg|otf|woff|woff2)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
这是浏览器的同源策略限制http://www.w3.org/TR/css3-fonts/#same-origin-restriction。
如果您使用的是 amazon s3,这可以帮助您加载 Amazon S3 CORS(跨域资源共享)和 Firefox 跨域字体加载
您的 CDN 需要Access-Control-Allow-Origin:*
在字体文件的响应中包含标头。请参阅我对 Chrome 中未显示的 Font Awesome 图标的回答,这是与 MaxCDN 相关的跨域资源共享策略问题
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>