前端跨域详解

跨域造成的原因

1.浏览器限制（同源策略）

同源策略的解释有很多，我这里贴上阮一峰老师的解释地址，有兴趣可以去看看阮一峰同源策略，用一句话解释就是，协议相同，端口相同，域名相同。比如下面这个url，https://www.baidu.com:443，使用的是https协议，域名是www.baidu.com，端口是443。当三者有一者不同，则会触发浏览器的同源策略，也就是通常所说的跨域。

2.XMLHttpRequest请求

浏览器的请求我们常用的是XMLHttpRequest对象，但是还有另外的一种请求大家平时会忽视，这种请求一般我们会写成src="...path"，下图就有2个这样的网络请求（1个图片，type是jpeg，另外一个type是script），所以我们平时可以做的性能优化可以考虑减少这类请求哦（雅虎性能优化准则第一条，就是减少http请求，足以证明它在优化中的重要性，扯远了，这里我们要说的是跨域）。说了这么多，我想说的也就是说必须使用XMLHttpRequest才会造成跨域问题。这里我引用了网络的一张图片，路劲很明显是来自百度，与我本地的域名是不同的，但是我可以使用这个图片和jQuery库.

跨域的解决方案

1.时代的产物jsonp

在上面造成原因的第二条我们知道，如果不使用XMLHttpRequest发送请求，则不会造成跨域问题。jsonp就是利用了这个原理进行跨域访问。我们熟悉的慕课网就使用了jsonp，大家可以去看看，我也截了一个图给大家看看

，这种跨域方式也比较简单，前端动态创建一个script标签，利用它的src去跨域，在每次跨域成功后销毁这个标签就好了，jQuery的源码写的十分清楚，感兴趣可以去看看。不过缺点也是十分的明显，1：只支持get请求，这个缺点也是最致命的，一个只只支持get请求的跨域方式是无法满足广大开发需求的，在这里我也无须多言。2：后端需要修改代码，我们可以看上面慕课网的这个请求，后端给我们返回的结果这里我只截取了部分，不过也十分明显了，后端返回的其实一段可执行的js代码，不是json数据。

2.CORS跨域资源共享

这个依旧推荐阮一峰老师的日志，讲得十分请求，献上地址阮一峰跨域资源共享。不过我想讲的是跨域资源共享中的Access-Control-Allow-Origin：，我们经常看到后端使用上图的红色框区域进行跨域，那么是不是就高枕无忧了呢？答案显然不是的，当我们设置了http请求的自定义头，或者请求携带了cookie，其实上方的跨域方式是会失败的。我们每个跨域请求，浏览器都会自动再请求头增加 origin : xxxx，记录自身的请求地址，例如origin: https://www.baidu.com。当设置了自定义请求头，并且还是跨域请求，服务器，必须必须明确的设置Access-Control-Allow-Origin：https://www.baidu.com，必须完全匹配域名才能跨域。

3.代理，nginx或者apache

客户端发出的请求，通常为，B -->>Apache/nginx（http服务器）-->>tomcat/weblogincl（应用服务器）。显然，客户端发出的请求先经过了nginx服务器（http服务器）。http服务器通常可以直接返回给客户端一些静态文件，比如图片，css文件...诸如此类。也就是因为如此，我们可以再http服务器做一层配置，接受客户端的请求，并将请求转交给应用服务器。其实http服务器还可以做很多事情，因为可以让客户端所有的请求都进行代理，所有可以做到负载均衡，反向代理啊。负载均衡和反向代理是什么不是本文想解释的，大家有兴趣可以多看看。这类有点可以很大减少应用服务器的压力，可见代理的强大。