解决字体跨域加载问题（Apache和Nginx服务器配置）

问题描述

Font from origin 'http://trunk.supply_chain.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.xicheng.com' is therefore not allowed access.

这是一个很常见的字体跨域问题，发生在生产环境Nginx服务器上。在本地开发环境中，都是一个域名，没有跨域问题。但上线之后静态资源有专门的域名，问题就出现了。

之前在2016年4月遇到过这个问题，是amaze UI里面的字体跨域。当时的解决方案是把css里面的字体路径换成主站的URL，暂时解决了问题。

原本找的资料是在Nginx里面设置header，但没效果，估计原因是没有header模块，而且时间紧迫，不可能编译线上的Nginx。

今天做多用户的供应点系统，问题又重现了，本地环境是WAMP集成环境。

Apache服务器解决方法（在conf、或者.htaccess 添加均可）

  Header set Access-Control-Allow-Origin "*"

注意: LoadModule headers_module modules/mod_headers.so 这个模块一定要存在且加载成功的

如果以上模块不加载，单纯的配置 Header 将会报错，亲测踩坑。网上查的很多资料，都没有提及这个模块。

Header set Access-Control-Allow-Origin "*"
Invalid command 'Header', perhaps misspelled or defined by a module not included in the server configuration

注意: 线上操作一定要先备份原有的配置文件，修改完配置文件之后一定要将配置文件进行语法检查。

apachectl configtest

输出 Syntax OK 方可重启apache。

Nginx服务器解决方法（在conf文件修改）

location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

nginx/1.8.1 测试通过

最终解决方案

.htaccess 文件改为

Options +FollowSymlinks -Multiviews
RewriteEngine On


Header set Access-Control-Allow-Origin "*"


RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]

问题解决前后对比

出问题的时候: 浏览器报错，字体文件无法加载，提示No 'Access-Control-Allow-Origin' header。

问题解决后: 字体文件正常加载，页面显示正常。

总结

字体跨域问题是技术上常见的问题，主要是由于浏览器的同源策略限制导致的。解决方法很简单，就是在服务器配置中添加CORS相关的HTTP头部。

• Apache: 使用mod_headers模块，在.htaccess或httpd.conf中添加Header指令
• Nginx: 在server块中添加add_header指令，针对字体文件类型进行匹配

特别注意: 所有修改服务器配置前，一定要先备份原有配置，修改后一定要进行语法检查，确保无误后再重启服务器。