css跨域加载字体

原文：https://www.jianshu.com/p/fa4a28ef2c81

一直以为css中链接的资源，不会因为跨域而导致加载失败。比方说图片。

但今天还是遇到了跨域失败的问题。

chrome浏览器中提示：Access to Font at 'http://static.utsing.com/ienglish/font.ttf' from origin 'http://ienglish.utsing.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://ienglish.utsing.com' is therefore not allowed access.

edge浏览器中提示：CSS3115: @font-face 跨源请求失败。无 Access-Control-Allow-Origin 标头。

这其实就是跨域导致加载失败。这可能是对于ttf这样的资源存在一些潜在的危险，不像图片那样安全，所以浏览器默认禁止其跨域加载。

http://ienglish.utsing.com为主站，http://static.utsing.com为静态资源站。

解决方法：

1.跨域导致的问题，那就不要跨域了。将资源（http://static.utsing.com/ienglish/font.ttf)放到主站下，并修改对应链接。（估计这个方法，你的上司不满意）

2.将静态资源站设置为可以跨域。只要为此资源加入Access-Control-Allow-Origin这个header即可。

如果是nginx服务器的话，你可以在http块内加上如下代码：

     add_header Access-Control-Allow-Origin http://ienglish.utsing.com;  //必须

     add_header Access-Control-Allow-Headers X-Requested-With;//可选

     add_header Access-Control-Allow-Methods GET,POST,OPTIONS;//可选

你也可以在php、java等代码中加入Access-Control-Allow-Origin、Access-Control-Allow-Headers 、Access-Control-Allow-Methods这些header。

作者：utsingcom
链接：https://www.jianshu.com/p/fa4a28ef2c81
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。