跨域请求问题

开启 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。