项目实战之跨域处理

什么是跨域?

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

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

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

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

代码语言:javascript
复制
Cookie 、LocalStorage 和 IndexDB无法读取
无法获取或操作另一个资源的DOM
AJAX请求不能发送

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

在这里插入图片描述

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

常见跨域方案

代码语言:javascript
复制
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跨域。实现方式如下: 原生实现方式

代码语言:javascript
复制
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实现

代码语言:javascript
复制
第一种:$.ajax()方法
代码语言:javascript
复制
$.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