你可以在小编主页中看到其他文章

为啥你一定要会并且 搞清楚跨域？

用不消 的到先不说，有另外2个重要原因：

面试必考

超等 多的网站并没有防跨域进击  ，嘿嘿...

跨域这两个字，跨是个动词，那么‘域’到底是什么鬼？

域是什么？

简单的说就是网址，域指的是协议+主机+端口组成的网址，比如   https://www.toutiao.com

同源策略对域的限制

同源策略是浏览器对不合  域之间拜访 资源的限制：

1. 不合  域之间弗成 以发送 HTTP 请求

2. 浏览器不合  窗口的 DOM BOM 对象是自力 的，无法拜访

3. iframe标签嵌套的页面也遵守同源策略

跨域进击 指的是第一种情况。

如果浏览器没有这些限制会怎么样？

比如  黑别人的扣扣，我完全可以在自己的网站引用扣扣官网的html，js等模拟官网，欺骗别人上岸 ，然后记录输入的账号密码等。

跨域的几种实现方法

这里只介绍几种常用的

JSONP

jsonp是为了解决跨域请求的DIY出来的办法 ，并且 也比较  便利 ，年夜 部分  的跨域问题都使用此种方法 解决

** 原理 **

同源策略中，src属性的请求不会被限制跨域，那么可以利用这点完成跨域请求，但需要和后端配合

** 实现 **

步调 ：

1. src指定接口，返回的代码会被视为js代码执行

<script src="https:www.bbb.com/test.php?callback=myCallback"></script>

2. 写个全局函数

var myCallback = function(data) {

　console.log(data);

};

注：一般是全局的，指定对象下的办法 也可，但需要和后端协商好

3. 后端返回拼接后的js代码

<?php

　$callback=$_GET['callback'];

　$data='sfsdfsdfas';

　echo $callback.'("'.$data.'")';

>

//返回给前端并被作为js执行，挪用 相应的函数，获得传回来的数据

callback("sfsdfsdfas")

使用jQ更简单些:

不需要回调函数写在success里即可，这样可以不配置全局函数（jsonpCallback），jQ自动生成完成后自动销毁

$.ajax({

　url:"https:www.bbb.com/test.php",

　dataType:"jsonp",

　type:"get",

　// jsonp:"callback",

　// jsonpCallback:"jsonpcallback",

　success:function(data){

　　console.log(data);

　},

　error:function(data){

　　onsole.log(data);

　}

})

** 缺点 **

只能是get请求（src发送的都是get）

postMessage+iframe

如果你只是想挪用 另一个网站的页面，直接用iframe即可。如果想获取它的数据可以使用H5的 postMessage

window.postMessage(data,域)传递信息可以跨域

域为 * 时，不限制。

步调 ：

1. 使用iframe引入另一个网站

<iframe id="hisPage" src="https://www.bbb.com/test.html" ></iframe>

<script>

function onLoad(){

　var hisPage = document. getElementById ( 'hisPage' );

　var hisWindow = hisPage. contentWindow;

　hisWindow. postMessage ( 'asfdsfds',* );

}

</script>

2. 另一个网站使用onmessage事件监听数据

window.onmessage=function(e){

　e= e|| event;

　console.log(e.data);//值在data属性里

}

缺点：限于H5，不适合用于直接请求接口，但可以变通，也需要相互配和

署理

此方法 由后端完成，后端拜访 没有浏览器的同源策略限制，也就不存在跨域问题。

后端一般也有限制，比如  没上岸 则无权请求接口等。

比如  你想拜访  https:www.bbb.com/test.php ,通过署理 解决步调 如下：

1. 前端请求后端的某个接口（即署理 ）

2. 这个接口模拟请求（包含  正当 的用户信息）去拜访 　https:www.bbb.com/test.php

3. 获得返回数据后再传给前端

跨域资源共享（CORS）

目标域的后端可以通过修改header，来允许所有来源的拜访 ，或指定拜访 源

在php接口脚本中加入以下两句即可：

//允许所有来源拜访

header('Access-Control-Allow-Origin:*');

//允许拜访 的方法

header('Access-Control-Allow-Method:POST,GET');

前端也要修改

$.ajax({

　url:"https:www.bbb.com/test.php",

　xhrFields: {

　　// 前端设置是否带cookie

　　withCredentials: true

　},

　//会让请求头中包含  跨域的额外信息，但不会含cookie

　crossDomain: true,

　success:function(){...}

});

跨域到这里搞清楚了，下篇文章搞事情——CSRF 跨域进击

【javascript】【javascript】【javascript】【javascript】【javascript】【javascript】

文章来源：今日头条(昭通热线网www.ztrxw.cn版权与免责声明：1.本网转载其他媒体，目的在于传递信息，并不代表赞同其观点和对其真实性负责，本网不承担此类稿件侵权行为的连带责任。2.如本网所转载稿件涉及版权等问题，请著作权或版权拥有机构致电或来函与本网联系，本网将在第一时间处理妥当。如有侵犯您的名誉权或其他权利，亦请及时通知本网。电话：0870-2156588 邮箱：信箱：569098112@qq.com。本网在审慎确认后，将即刻予以删除。3.本网原创文章未经允许,私自转载者本网保留追究其版权责任的权利。转载请注明来源昭通热线网www.ztrxw.cn）