Access-Control-Allow-Origin

1. 问题描述

Firefox打开网站后台（http://backend.test.com）出现以下状况，两个woff格式的小图标无法显示。

2. 浏览器报错信息

已拦截跨源请求：同源策略禁止读取位于http://static.test.com/Public/back/lib/Hui-iconfont/1.0.1/iconfont.woff的远程资源。（原因：CORS头缺少’Access-Control-Allow-Origin’）

3. 问题原因

浏览器的同源策略（Same Origin Policy），限制了来自不同源的”document”或脚本，对当前”document”读取或设置某些属性。《白帽子讲WEB安全》

何为同源？简单粗暴一点的解释就是，访问地址第一个‘/’目录左边的地址完全相同。

决定是否同源的因素包括：（host(域名或IP)、子域名、端口、协议），任何一个不同就表示不同源。

例如a.com的test.html需要加载b.com的test.php，那么需要b.com的授权。在a.com跨域请求b.com的‘document’或脚本时，浏览器会自动在请求头里添加Origin Header，用来标记发起请求的’源’，浏览器会根据b.com服务器的返回头来判断’源’a.com是否有权访问，如有授权则允许访问，反之阻止其访问。

4. 跨域访问授权方法（可以代码授权，也可以WEB服务器授权，这里只介绍Nginx和Apache WEB服务器授权）

Nginx:

location ~* \.(ttf|ttc|otf|eot|woff|font.css)$ {

    add_header Access-Control-Allow-Origin  http://backend.test.com; //允许谁跨域访问，不推荐使用*,不安全。

}

Apache:

Headerset Access-Control-Allow-Origin  http://backend.test.com;

5. Nginx access-control-allow-origin 多个域名

因为nginx（add_header Access-Control-Allow-Origin）只支持单域名和*，因为*不安全，所以当需要添加多域名的时候可以借助nginx的if语句来判断。

location ~* \.(ttf|ttc|otf|eot|woff|font.css)$ {

    if ($http_origin = ‘http://backend.test.com’) {

        add_header ‘Access-Control-Allow-Origin’ “$http_origin”;

    }

    if ($http_origin = ‘http://wap.test.com’) {

        add_header ‘Access-Control-Allow-Origin’ “$http_origin”;

    }

}