[转] font-face字体跨域 / Ajax 跨域办法

字体跨域解决办法

原文地址: font-face跨域办法
font-face是现在比较流行的技术，可以矢量化你的图标，更改颜色方便等等。如果你想更进一步了解他，请点击这里(CSS3 icon font完全指南)今晚有网友问到 font-face 跨域在 nginx 下如何配置。
所以在这里补充一下内容：
原因：
浏览器(不仅仅是Firefox)对字体文件有加载限制，也就是说不允许你随便加载别人的字体，防止他人盗用字体,只有在服务器端允许访问的情况下才能够加载指定的字体文件
解决办法：
1、把字体文件放在你网站指定目录下。
2、给字体文件的http头里面添加 Access-Control-Allow-Origin 属性，以控制指定域引用你的字体文件。
nginx

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

nginx(多域名禁止访问)

server { 
    ... 
    # Fix @font-face multi cross-domain restriction
    location ~* \.(ttf|ttc|otf|eot|woff|font.css) { 
        if ($http_origin ~* "^(https|http)?:\/\/.*\.yourdomain\.com" ) {
            add_header Access-Control-Allow-Origin $http_origin;
        }
    } 
    ...
}

apache

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

apache(多域名)

SetEnvIf Origin "^http(s)?://(.+\.)?(domain\.org|domain2\.com)$" origin_is=$0 
Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is

3、添加mine

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

跨域时候的参数记录

mac/nginx 下支持 add_header 选项

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With,X-ACCESS-TOKEN,Content-Type;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

安装 **nginx-extra** 版本时候的参数

more_add_headers 'Access-Control-Allow-Origin *';
more_add_headers 'Access-Control-Allow-Headers X-Requested-With,X-ACCESS-TOKEN,Content-Type';
more_add_headers 'Access-Control-Allow-Methods GET,POST,OPTIONS';