跨域请求问题

开启 HTTPS 之后 网站出现字体文件跨域的问题 请问如何解决?

作为一个懒人,我选择字体本地化…

首先,字体文件存储的服务器必须也要支持 HTTPS
然后,如果字体所在的服务器和网站不是同一个域名,也就是跨域的话,需要在存储字体的服务器设置 Header
access-control-allow-origin
想省事一点的话就 access-control-allow-origin: *,但是人家可以直接跨域引用你的字体文件,当然如果你不担心自己流量爆炸的话……随意吧

font-face跨域办法

font-face是现在比较流行的技术,可以矢量化你的图标,更改颜色方便等等。如果你想更进一步了解他,请点击这里(CSS3 icon font完全指南)
今晚有网友问到font-face跨域在nginx下如何配置,印象中一淘UX有文章介绍办法,但打开文章里面相应的链接后发现没内容。
搜了一下其他地方,大多数给出的都是一样的链接。

所以在这里补充一下内容:

原因:

Firefox对字体文件有加载限制,也就是说不允许你随便加载别人的字体,防止他人盗用字体。

解决办法:

1、把字体文件放在你网站根目录下。
2、给字体文件的http头里面添加Access-Control-Allow-Origin属性,以控制指定域引用你的字体文件。

nginx:

server {
    ...
    # Fix @font-face cross-domain restriction in Firefox
    location ~* \.(ttf|ttc|otf|eot|woff|font.css)$ {
        add_header Access-Control-Allow-Origin "http://yoursite.com";
    }
    ...
}

apache:

<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://yoursite.com"
  </IfModule>
</FilesMatch>

 3、添加mine

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff woff

 

 

css加载字体的跨域问题

刚才碰到一个css加载字体跨域问题,记录一下啊。

站点的动态请求与静态文件请求是不同的域名的。站点的域名为 www.domain.com,而静态文件的域名为 st.domain.com。

问题:

页面中加载css文件:<link rel="stylesheet" href="http://st.domain.com/css/uniform.css" />

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

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

}

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

 

解决方案:

我们使用Access-Control-Allow-Origin:* 通过启用cors 来解决跨域问题。

具体步骤如下:

1.开启apache的mod_headers模块

LoadModule headers_module modules/mod_headers.so

2.在st.domain.com的主机配置中加入

Header set Access-Control-Allow-Origin http://www.domain.com (这句话也可以加入到url重写文件)

重启apache。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值