解决字体文件Font跨域权限问题

问题描述：

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.   

  之前这个问题2016.4.1遇到过，是amaze里的字体跨域，因为是生产环境Nginx，当时在本地都是一个域名，没有跨域这回事！上线之后静态资源有专门的域名，问题出现了，当时找的资料是nginx里面设置header，但是没效果，估计原因是没有header模块，时间紧迫，不可能编译线上的nginx了，只有把css里面的字体路径换成主站的url，暂时解决。

 今天做多用户的供应点系统，老天真是眷顾我，问题又给我重现了，本地wamp集成环境。

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

1 2 3 4 5

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">   <IfModule mod_headers.c>     Header set Access-Control-Allow-Origin "*"   </IfModule> </FilesMatch>

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

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

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

Invalid command 'Header', perhaps misspelled or defined by a module not included

 in the server configuration

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

这是我本地的语法测试截图。输出 Syntax OK  方可重启apache。

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

1 2 3

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

nginx/1.8.1 测试通过

出问题的时候：

问题解决时候：

变通解决办法：font转base64!!!

配置cdn之后，font 字体不生效了，其实是跨域了 Access-Control-Allow-Origin, 通常解决办法就是设置apache、nginx、后端代码做处理。

其实还有其他的处理方式，font 文件转成base64 写入到css文件中，如下图所示：

怎么替换成base64 ? 这个地址 https://transfonter.org/

上传完了，可以自动下载base64 转换后的文件。