字体文件跨域问题及解决办法

深度链接 / 2023-12-06 21:48:19 / 123

Access to Font at 'http://file.mylove40.com/com/mui/fonts/mui.ttf' from origin 'http://m.mylove40.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://m.mylove40.com' is therefore not allowed access.

1、系统环境

[root@wrx ~]# uname -sir
Linux 2.6.32-696.el6.x86_64 x86_64
[root@wrx ~]# httpd -v
Server version: Apache/2.2.15 (Unix)
Server built:   Oct 19 2017 16:43:38
[root@wrx ~]#

2、问题

Access to Font at 'http://file.mylove40.com/com/mui/fonts/mui.ttf' from origin 'http://m.mylove40.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://m.mylove40.com' is therefore not allowed access.


3、解决办法

修改httpd.conf文件
[root@wrx ~]# vim /etc/httpd/conf/httpd.conf
虚拟主机配置中添加如下内容
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|woff2)$"> #字体文件匹配
        Header set Access-Control-Allow-Origin "*" #设置允许跨站
    </FilesMatch>
    
修改后的配置如下:

<VirtualHost *:80>
    ServerAdmin webmaster@mylove40.com
    DocumentRoot /data/file/web/
    ServerName file.mylove40.com
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|woff2)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
    ErrorLog logs/file.mylove40.com-error_log
    CustomLog logs/file.mylove40.com-access_log common
</VirtualHost>