apache+nginx解决css引用本地字体不同域名打开提示跨域

2021-03-12 4782阅读 0评论

温馨提示:这篇文章已超过738天没有更新,请注意相关的内容是否还可用!

站点静态文件放到了另外一个域名下(方便cdn)

站点的域名为 www.itwuo.net,而静态文件的域名为 itwuo.wenytao.com

现在问题来了,

页面中加载css文件:

此css中调用了外部字体如下:

@font-face { font-family: 'FontAwesome'; src: url('font/fontawesome-webfont.eot');}

浏览器报请求会报跨域错误的请求。

首先我是根据我自己的运行环境写的这篇博文,使用宝塔面板,使用阿帕奇,这里就简单说下解决方法:

首先我们要确定阿帕奇已经开启了mod_headers模块,具体方法直接在宝塔里找到配置--然后ctrl+f 搜索:

LoadModule headers_module modules/mod_headers.so

apache+nginx解决css引用本地字体不同域名打开提示跨域 宝塔 配置 字体跨域 apache nginx 教程 经验 第1张

如果能搜到有一段前面没有加#号的,那么就表示开启了,你只需要在配置的最末尾,添加这段代码即可:

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

apache+nginx解决css引用本地字体不同域名打开提示跨域 宝塔 配置 字体跨域 apache nginx 教程 经验 第2张

保存后再去刷新网页,问题解决。

如果是nginx,可以尝试在配置里添加这段:

location /{add_header Access-Control-Allow-Origin *; }
    版权声明
      本站致力于为模板爱好者提供国内外插件开发技术和模板共享,着力为用户提供优资资源。
      本站提供的所有下载文件均为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
      我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,请编辑邮件并加以说明发送到站长邮箱。
      站长会进行审查之后,情况属实的会在三个工作日内为您删除。
    文章版权声明:除非注明,否则均为点滴博客原创文章,转载或复制请以超链接形式并注明出处。
    您需要 登录账户 后才能发表评论

    发表评论

    快捷回复: 表情:
    评论列表 (暂无评论,4782人围观)

    还没有评论,来说两句吧...

    取消
    微信二维码
    微信二维码
    支付宝二维码