本文共 1190 字，大约阅读时间需要 3 分钟。

背景

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

什么是跨域以及产生原因

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

　　跨域情况如下： 　　

url	说明	是否跨域
	不同域名	是
	同一域名，不同文件夹	否
	同一域名，不同端口	是
	同一域名，不同协议	是
	域名和域名对应IP	是
	主域相同，子域不同	是（cookie不可访问）
	同一域名，不同二级域名（同上）	是

跨域的常见解决方法

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

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，代理转发后请求变为了，通过代理的文件来发起请求的主机就变成了itclj.com，浏览器里面实际的主机是www.itclj.com所以，所以被Nginx认为是跨域请求了。

修改Nginx为如下配置即可。

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