JavaScript常见跨域思路代码

首先，跨域是指：协议、域名、端口有任何一个不同，都被当做是不同的域。举一个最简单的例子：a.text.com跟b.text.com就是两个不同的域，之间所发生的任何交互都叫做跨域请求。那么在我们本地如何来设置跨域模拟环境呢，别着急，听哥慢慢说，你只需要点击我的电脑，打开C：\\window/system32\drivers\ect里面的hosts文件，就是这个配置文件，那这个配置文件到底干了些什么呢，这边我们还是得先了解什么是DNS解析过程，域名是如何解析的？这么来说吧，假如你在浏览器输入www.test.com后，那么它背后又是干了些什么呢，我们的电脑又是如何来解析这个域名的呢？来，咋们一个一个说。首先它会到本机文件系统里寻找一个映射文件，有木有被这个映射文件名字给整懵了，其实这货就是上面我们说到的hosts。然后这个文件配置了映射关系，简单讲就是某个域名对应着某个一个IP，如果在我们配置文件找不到当前域名对应IP这么一个映射关系，它才会向网络上的DNS服务器发起解析的请求，让服务器返回当前域名对应的IP是什么。所以搞清楚这些以后，我们只需要修改hosts就能完成模拟环境的设置！那么接下来才是重头戏了~

我们来说第一种解决跨域的方法：通过iframe协助完成跨子域

就拿上面我们提到的两个东西a.text.com跟b.text.com，如果你直接在a页面对b进行访问，那么结果就是这样，我截图啦：

那么我们另外一个域是如何来调用上面那个回调函数的呢？前面我们已经提到过iframe这个东西，那它又干些什么呢，其实很简单，只是利用iframe里面的src属性，在属性里面我们填写的是bbb页面的url路径，同时iframe只是协助作用，我们又不想看到它，所以我们这么做，把它给display:none掉！来，我们看下代码：

那么接下来也是最后一步，就是在bb页面中找到iframe的window引用，然后通过window引用就可以调用另外一个页面的方法，记得上面我们所提到的callback回调函数吗，它就是用来处理请求完成的结果。我们这里传入一个匿名函数，这个匿名函数的作用是处理对方请求已经完成的结果，所以当这个函数被调用的时候，其实data就是从另外一个域传回的数据，这样就实现了我们两个域之间的数据交换。有没有萌萌哒？哈哈，来，我们看代码：

现在有没有豁然开朗了呢？没有也没关系，我给你总结一下：实际ajax还是在b域里面来完成的，我们只是借助iframe来干了实现数据在不同域之间跨域传递这么一件事。说到最重点的就是这句：document.domain = ‘test.com’，可别小看这货，它作用是相当的大，它是把当前域提升到根域这个级别，我们前面说到了，在不同域之间是不能进行数据传递的，正因为我们通过这货来提升域为test.com这个根域，来让两个不同子域来变成同一个域，最后两个页面就可以进行通信了。

好啦！我们接着来学习第二种跨域的方法：通过jsonp实现跨域

谈到这块大家肯定都不陌生，特别是我们h5-5这群小子，那么我在这里也当做是复习，再给大家梳洗一下利用jsonp实现跨域的核心关键点。首先我们需要理解的是jsonp在跨域过程中干了那些事？从本质上讲，其实jsonp并不是通过ajax来解决跨域，而是执行跨域js。有没有明白这个意思呢？不明白也没关系，我们接下来一个一个来讲：

前面我们也提到iframe实现跨域的最根本就是利用src属性来实现的。没错，script这货也是干了同样的事，如果你想把它换成img、iframe来实现也是可以的，因为它们都具备src这个属性！当然那我们为什么还选择script这个家伙呢，其实它只是更合适，我们可以通过script加载其他域的一段动态脚本，这段脚本可以包含我们想要的数据信息，这样就一石二鸟，一箭双雕了是吧。用它就对了！来，我们还是看代码：

这边我们封装了一个jsonp方法，它可以实现动态生成script标签跟删除script标签。以及实现回调函数的绑定，这边你就需要清楚后台这个回调函数是干啥的，在前端中，这个callback是匿名函数，但是在后端它在返回的时候，它必须知道回调函数的名称是什么，才能正确的调用，是不是觉得脑袋不够用了，晕菜了吧！没事，咋们看下代码就知道了：

后端代码：

看到这里，应该明白了为什么我们传入的回调函数为啥要处理一下，让它产生随机名称，接着把这个随机名称作为window的属性给它存储起来，同时让这个window属性指向callback，到这里我们就相当于给匿名函数起了一个名，这样后台就可以调用得到啦！

然后我们要进行跨域的操作就变得简单了。假如我们要向b这个页面进行跨域请求，那么我们只需要调用jsonp这个函数，在url位置上填写b的路径，代码如下：

最后面我们执行了一个onload来实现删除script标签。到这里我们也解决了跨域问题了，有没有惊呆了，难道这么简单？没错，就是这么简单。

接着我们来加个菜~  如果你很熟悉jQuery的开发文档，应该知道getJSON()这个东西，其实它也是可以实现跨域请求的，同样的它也有三个参数，第一个参数也是url，第二个参数data，第三个参数是callbakc回调函数。那么接下来就依瓢画葫芦了，我们先来看下代码：

这里面有一个关键点：就是url后面要跟一个函数名等于?这样一个参数，只有这样getJSON()才是以jsonp的形式发起；当然如果你没有跟上一个函数名等于?这样一个参数，那么就认为它只是同域中的ajax请求，是无法完成跨域的。

介绍完getJSON()那么我们接下来继续学习利用底层的jquery.ajax方法发起请求，同样可以达到跨域的效果。我们来看下代码：

这边跟getJSON()的差别主要是定义了dataType的类型为jsonp类型，其他地方都是一样的。其实它还可以这么写，我们先看代码，在解释原因：

这种方法是使用jsonp和jsonpCallback来代替上面的callback匿名函数，jsonp指定的是函数的名称，就如上面的callback，也可以用其他的名字；jsonpCallback是指定参数的值，上面是参数值是随机生成的，所以用“?”来代替。好了，到这里我们利用jsonp来解决跨域也差不多了，同样的，既然它那么好用，那么有利必有弊，jsonp实现跨域有啥缺点呢？这里我们总结了两点：第一点是只支持get方式；第二种是后端代码要调整。其实呢，在最上面我们已经提高过，jsonp跨域的本质是通过script标签来和其他域发生交互，而且script标签只支持get方式的请求，所以这也是jsonp跨域的一大缺点。

扯了也快两个小时了，不知道你们看懂了多少。当然，既然要学就得真的学会，自己可以尝试去敲下代码验证下！好了，最后我们来个压头戏，我们再讲一个跨域解决方法：CORS跨域资源共享

说到这货大家肯定不陌生，因为它本质上就是XMLHttpRequest对象原生的跨域ajax支持。整个思路你可以这样理解：举个简单的例子，咋们上班狗不得都要打卡上班吗？如果打卡机没有采集你的指纹，那么你是无法完成身份验证的。同理，如果我们请求的目标域能够给我们一个允许的标志，那么我们就可以进行相应的跨域访问了！原理搞清楚了，那接下来就好办了。首先地球人都知道ajax请求默认是get请求方式进行的，那么我们先以这种情况来进行跨域，我们代码如下：

看到这，你想到了什么，咋们执行代码会出现什么情况呢？deng~deng~deng~

哈哈~  报错？不是吧？这么可能？没错，是报错，我们这样只是简单进行ajax请求，进行跨域当然会报错啦，但是呢，这个报错是非常有必要的，细心的你如果仔细看，会发现报错的原因在于缺少一个头，就是这句代码：Control-Allow-Origin。太感谢浏览器了，这货竟然帮我们把问题找出来了。其实这个东西是为了跨域安全问题，需要在服务器响应头部提供一些信息，供浏览器校验请求是否被允许。那么接下来就好办了，我们只需要在我们目标请求b.test.com在返回的时候给我们加一个头信息，并且头信息是允许我们当前所在的域b.test.com来发起访问。那么接下来我们只需要修改请求目标的后端代码，代码如下：

这边只要在请求头里面把a.test.com设置为可以被访问的对象，这样它就可以实现跨域请求了。如果实现多个域只要用“*”来代替就行啦。

刚才上面我们已经说过我们的发起形式是已get形式发起的，那么如果我们使用post或者put发起呢，会出现什么乱子呢？我们看代码：

这边一样会报错，一样的我们根据浏览器反馈给我们得信息进行分析，得出了Access-Control-Allow-Methods。粗浅的理解就是没有这个权限呗！那不是很好办嘛，同理我们在后端代码上做下修改不就成了！代码如下：

这样修改完，就可以使用POST/PUT等请求方式进行跨域请求啦。到此为止，我们针对跨域这问题也算是详细得分析了一遍了，如果乡亲们还是不解，那么我也给您跪了。真心带不动啊！！！