跨域请求

2024-06-28 15:59:43

字体：大中小

来源：转载

供稿：网友

背景

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

什么是跨域以及产生原因

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

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

跨域的常见解决方法

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

jsonp 需要目标服务器配合一个callback函数。window.name+iframe 需要目标服务器响应window.name。window.location.hash+iframe 同样需要目标服务器作处理。html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage，主要侧重于前端通讯。CORS 需要服务器设置header ：access-Control-Allow-Origin。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配置