项目实战之跨域处理

什么是跨域？

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。
什么是同源策略？

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，它是由Netscape提出的一个著名的安全策略。

同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

其主要限制以下几个方面：

Cookie 、LocalStorage 和 IndexDB无法读取
无法获取或操作另一个资源的DOM
AJAX请求不能发送

那么什么是同源呢？所谓的同源，就是指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可。这样可能不是很好理解，下面通过表格对比帮助大家理解：

 

 

此时，不允许同通信的页面之间想要实现通信，就要使用到跨域了。

常见跨域方案

1、 通过jsonp跨域
2、 document.domain+iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

jsonp跨域

在页面中通过script标签加载资源，是被浏览器所允许的，也不存在跨域的问题，基于这一原理，我们可以通过动态的创建过script标签，然后src赋值一个带参的url，进而实现跨域,也叫jsonp跨域。实现方式如下：
原生实现方式

function callback(res){
console.log(res)//接口返回值
}

let jsonp = document.createElement(‘script’);
jsonp.src = ‘http:/www.monkey.com/admin/getUser?name=小燕子&callback=callback’;

document.getElementsByTagName(‘head’)[0].appendChild(jsonp);//添加到页面中

jsonp.remove();//从页面中移除

jQuery实现

第一种：$.ajax()方法

$.ajax({
url:‘http:/www.monkey.com/admin/getUser’,
dataType:“jsonp”,
jsonp: “callback”,//请求时路径参数名
jsonpCallback:“callback”,//设置后端返回函数名
success:function(data){//回调函数
console.log(data);
}
});

 

更多内容请见原文，文章转载自：http://www.mark-to-win.com/tutorial/50668.html