跨域请求

背景

最近闲来无事做个个人网站耍，部署到服务器的时候发现有个字体文件老是下载不下来，浏览器老是报不允许跨域请求。

什么是跨域以及产生原因

跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。
　　跨域情况如下：
　　

url 说明 是否跨域 http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名 是 http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名，不同文件夹 否 http://www.a.com:8000/a.js
http://www.a.com/b.js 同一域名，不同端口 是 http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议 是 http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应IP 是 http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同 是（cookie不可访问） http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上） 是

跨域的常见解决方法

目前来讲没有不依靠服务器端来跨域请求资源的技术

1. jsonp 需要目标服务器配合一个callback函数。
2. window.name+iframe 需要目标服务器响应window.name。
3. window.location.hash+iframe 同样需要目标服务器作处理。
4. html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage，主要侧重于前端通讯。
5. CORS 需要服务器设置header ：Access-Control-Allow-Origin。
6. nginx反向代理 这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求。

我的情况

写了一个博客系统玩，自己的服务器，采用Nginx代理转发请求到tomcat。
部署完项目后浏览器里面访问，发现有几个图标出不来，经检测是字体文件被浏览器认为是跨越请求，没有被加载。该字体文件不是由页面直接引用，而是通过一个css文件加载的，该css加载无问题。字体文件和css文件都在工程目录下，理应不会出现跨域请求的情况。
在火狐浏览器里面打开网络请求查看器，点开请求结果为0字节的字体请求连接，结果如下：

这个字体文件是通过字体css依赖加载的，并不是通过页面直接引用。
发现请求头Host是 itclj.com 而Origin是http://www.itclj.com。
响应Server是由Nginx报出来的，进过定位，应该是Nginx认为，源主机是www.itclj.com，目标主机是itclj.com不来自同一个域，所以被认为是非法请求。

Nginx配置如下：

在浏览器里面请求www.itclj.com的时候Nginx会自动解析为服务名itclj.com，代理转发后请求变为了http://itclj.com，通过代理的文件来发起请求的主机就变成了itclj.com，浏览器里面实际的主机是www.itclj.com所以，所以被Nginx认为是跨域请求了。
修改Nginx为如下配置即可。

修改配置重启Nginx即解决问题。