font-face引用字体跨域导致font awesome图标无法正常显示

2020年11月26日 | 分类: 【技术】

意图构建一个单独二级域名存放所有共用库,比如font awesome图标。但发现即便路径正确,却依然不显示。经查询原因在于引用字体跨域导致。

参考:https://blog.csdn.net/dongdongzzcs/article/details/79484825
参考:https://blog.csdn.net/weixin_33947521/article/details/85606013
参考:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

在 font awesome 文件所部署的网站的

nginx 配置文件中设置:

server {
    ...
    # Fix @font-face cross-domain restriction in Firefox
	location ~* \.(eot|ttf|woff)$ {
	    add_header Access-Control-Allow-Origin *;
	}
    ...
}

A response that tells the browser to allow code from any origin to access a resource will include the following:

Access-Control-Allow-Origin: *

A response that tells the browser to allow requesting code from the origin https://developer.mozilla.org to access a resource will include the following:

Access-Control-Allow-Origin: https://developer.mozilla.org

Apache 配置文件中设置:

.hatccess中做如下设置:

<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"  #表示允许所有的源来访问资源,也可已指定为具体的域名,如 www.domain.com
Header set Access-Control-Allow-Methods "*"  #允许请求的方法 GET POST等