同源策略
- 浏览器对不同源的脚本或者文本的访问方式进行的限制，就是一种浏览器的安全机制。
- 同源：相同的协议、域名、端口号
同源策略限制的不同源之间的交互主要针对的是js中的XMLHttpRequest等请求
跨域
- 前置条件是我们在WEB服务器或者服务端脚本中设置ACCESS-CONTROL-ALLOW-ORIGIN头部，如果设置了这些头部并允许某些域名跨域访问，则浏览器就会跳过同源策略的限制返回对应的内容。
1.JSONP （需要后台配合）------(向后台请求数据的跨域)
-
jsonp的原理：
1.通过动态插入<script>标签来实现跨域资源访问的
2.server定义好的那个用来设置返回数据中执行函数名的那个函数，就叫jsonpCallback
3.jsonpCallback后面跟的value必须是全局作用域下的一个函数(和客户端注册的callback名称一致即可)
4.server返回的数据格式是固定的functionName(/* jsonData */)
<script type="text/javascript">
function jsonpCallback(result) {
alert(result.msg);
}
</script>
<script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
- 简述原理与过程：首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp。最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
- 客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里。（动态执行回调函数）
-
jsonp的特点：
1.jsonp是通过script的src属性去加载跨域资源的，所以jsonp请求都是get请求
2.get系有的特点jsonp都有
3.所有的jspon接口必须含有一个jsonpCallback，否则不是合法的接口
4.所有的jsonp接口必须按照固定的格式返回 functionName(/* jsonData */)原生封装
//jsonpcallback ---后台执行的函数名，一个字符串 //callback---前端执行的函数 (function(){ var count=1;//使每次的cbName都不重复 this.jsonp=function (url,data,jsonpcallback,callback){ var cbName='cb'+count++;//构造全局函数名 var callbackName='window.jsonp.'+cbName;//函数是全局的 window.jsonp[cbName]=function(data){ try{ callback(data); } script.parentNode.removeChild('script'); delete window.jsonp[cbName]//执行完就清除 } var src=tools.padStringToURL(url,data);//向url后面拼接参数 src=tools.padStringToURL(src,jsonpcallback+'='+callbackName); var script=document.creatElement('script');//生成script标签 script.src=src; } var tools={ padStringToURL：function(url,param){ var param=this.encodeToURIString(param); if(!param)return; return /\?/.test(url)?url+'&'+param:url+'?'+param }, encodeToURIString:function(data){ if(!data)return; if(typeof data==='string'){ return data; } var ary=[]; for(var n in data){ if(data.hasOwnProperty(n)){ ary.push(encodURIComponent(n)+'='+encodURIComponent(data[n])); } } return ary.join('&')//将每组键值对用&连接 } } })() jsonp("http://suggestion.baidu.com/su", {wd: word}, "cb", function (data) { console.log(data) })jquery的JSONP
$.ajax({ async:false, url: 'http://跨域的dns/document!searchJSONResult.action', type: "GET", dataType: 'jsonp', jsonp: 'jsoncallback', data: qsData, timeout: 5000, beforeSend: function(){ //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 }, success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数 if(json.actionErrors.length!=0){ alert(json.actionErrors); } genDynamicContent(qsData,type,json); }, complete: function(XMLHttpRequest, textStatus){ $.unblockUI({ fadeOut: 10 }); }, error: function(xhr){ //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 //请求出错处理 alert("请求出错(请检查相关度网络状况.)"); } });es6+promise封装JSONP
/** url:是接口 params:是参数 cb:是全局下回调函数名，后台返回 cb(data) ,相当于执行了cb函数，那么客户 端就可以在函数中任意操作data了 **/ function jsonp({url,params,cb}){ return new Promise((resolve,reject)=>{ let script = document.createElement('script'); params={...params,cb}; let arrs = []; for(let key in params){ arrs.push(`${key}=${params[key]}`); } script.src = `${url}?${arrs.join('&')}`; document.body.appendChild(script); window[cb] = function (data) { resolve(data); document.body.removeChild(script); } }) }; jsonp({url:'XXX',data:'XXXX',cb:'XXX'}).then(console.log(data))
2.Proxy代理 ：（接口的临时代理，解决跨域）
https://www.jianshu.com/p/0c301c46685b
3.cors（兼容性IE8以上，跨域请求数据的方式 ）
利用浏览器提供的跨域API实现跨域请求
- 注意
1.需要服务端设置响应首部Access-Control-Allow-Origin
2.可以使用get、post、head、delete、put、options这些http方法
var getCors=function(){
if(window.XDomainRequest){
return new XDomainRequest();
}
if(window.XMLHttpRequest){
var xhr=new XMLHttpRequest();
if(xhr.withCredentials!==void 0){
return xhr;
}
throw new Error('不支持cors')
}
throw new Error('不支持cors')
}
var cors=getCors();
cors.open('post','urlname.....',false);
cors.onload=function(){
if(cors.state==200){
cors.responseText//拿到返回值
}
}
cors.send(data);
cors的jq用法
$.ajax({
url:'',
data:'',
dataType:'返回的数据类型',
corssDomain:true，
success:function(data){
console.log(data)
}
})
4.document.domain + iframe （能力有限:同一网站的二级页面之间数据传递）
前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域
- eg : www.baidu.com是当前的域名，而baidu.com是基础域名。
有另一种情况，两个子域名：
- aaa.xxx.com
- bbb.xxx.com
可以通过Javascript，将两个页面的domain改成一样的，
需要在a.html里与b.html里都加入：
document.domain = "xxx.com";
这样这两个页面就可以互相操作了。也就是实现了同一基础域名之间的"跨域"。
只要能将document.domain改成一样的就可以跨域
关于iframe
一、在使用iframe的页面，要操作这个iframe里面的DOM元素可以用：
- contentWindow、contentDocument
获取iframe里面的window对象，再通过这个对象，获取到里面的DOM元素
例子：
var ifr = document.getElementById("iframe");
ifr.contentWindow.document.getElementById("XXXXX")
二、在iframe本页面，要操作这个iframe的父页面的DOM元素（即嵌套这个iframe的页面）可以用：
- window.parent、window.top
var ifr = document.getElementByTagName("iframe");
ifr.parent.document.getElementById("XXXXX")
5.postMessage（HTML5中的XMLHttpRequest Level 2中的API实现页面件的数据传递）
- 在发送数据窗口执行：otherWindow.postMessage(msg,origin)
- otherWindow:表示接受数据的窗口的window对象，包括iframe的contentWindw和通过window.open打开的新窗口。
- data表示要发送的数据，包扩字符串和对象(ie9以下不支持，可以利用字符串和json互换)。
- origin表示接收的域名。
var win = iframe.contentWindow||其他的window对象;
win.postMessage(data,'http://wozien.com'); //发送数据data给http://wozien.com
window.onmessage = function (e) {
console.log(e.data);//拿到数据：回给你
}
- 在接受的窗口监听window的message事件，回掉函数参数接受一个事件对象event，包括的属性有：
- data：接受的数据
- origin：发送端的域
- source：发送端的DOMWindow对象
window.onmessage = function(e){
if(e.origin !== 'http://localhost') return; //判断是否可信任
console.log(e.origin+' '+e.data); //拿到数据
e.source.postMessage('回给你',e.origin)
}
6.web sockets：（只有在支持web socket协议的服务器上才能正常工作，与http的长连接的区别是：这个协议是双向的）
- websocket约定了一个通信的规范，通过一个握手的机制，客户端（浏览器）和服务器（webserver）之间能建立一个类似tcp的连接，从而方便c－s之间的通信
客户端：
<div>user input：<input type="text"></div>
<script src="./socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');
// 连接成功处理
socket.on('connect', function() {
// 监听服务端消息
socket.on('message', function(msg) {
console.log('data from server: ---> ' + msg);
});
// 监听服务端关闭
socket.on('disconnect', function() {
console.log('Server socket has closed.');
});
});
document.getElementsByTagName('input')[0].onblur = function() {
socket.send(this.value);
};
</script>
node端：
var http = require('http');
var socket = require('socket.io');
// 启http服务
var server = http.createServer(function(req, res) {
res.writeHead(200, {
'Content-type': 'text/html'
});
res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
// 监听socket连接
socket.listen(server).on('connection', function(client) {
// 接收信息
client.on('message', function(msg) {
client.send('hello：' + msg);
console.log('data from client: ---> ' + msg);
});
// 断开处理
client.on('disconnect', function() {
console.log('Client socket has closed.');
});
});
