> >

如何解决Bootstrap CSS字体在Nginx和Apache上跨域的问题

前端开发BootstrapApacheNginx 969

在将前端分离的时候容易遇到的问题，大多表现为CSS引用字体出现同源策略错误，具体错误提示内容为：

Font from origin 'http://local.static' 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://local.knowbike' is therefore not allowed access.

提供两种主流服务器软件的解决方案：

Nginx配置方法

    location ~ .*\.(js|eot|css|otf|ttc|ttf|woff|woff2|svg)?$ {
           add_header Access-Control-Allow-Origin *;  #这里可替换成你的域名
           expires 7d;
            }
    }

使用命令 /usr/sbin/nginx -t 测试conf文件是否有误，如无误重启Nginx

systemctl restart nginx

Apache配置方法

在.htaccess中添加

<IfModule mod_headers.c>
  <FilesMatch "\.(js|eot|css|otf|ttc|ttf|woff|woff2|svg)$">
    Header set Access-Control-Allow-Origin "*"
  #这里可替换成你的域名 
  </FilesMatch>
</IfModule>

注意，坑来了：

不少人做了配置仍然无效，是因为Apachehttpd.conf中需要配置

LoadModule headers_module modules/mod_headers.so

将这行前面的注释取消！

然后重启Apache

systemctl restart httpd

最后重点

一定要清空一下浏览器缓存，或者CTRL+F5强制刷新才能见到效果！

Post Comment