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

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

用不用的到先不说，有另外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" onLoad="onLoad()"></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】