前端跨域的6种方式

同源策略

浏览器对不同源的脚本或者文本的访问方式进行的限制，就是一种浏览器的安全机制。
同源：相同的协议、域名、端口号
同源策略限制的不同源之间的交互主要针对的是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.'); 
    });
});

前端跨域的6种方式

前端跨域的6种方式

同源策略

跨域

1.JSONP （需要后台配合）------(向后台请求数据的跨域)

原生封装

jquery的JSONP

es6+promise封装JSONP

2.Proxy代理：（接口的临时代理，解决跨域）

3.cors（兼容性IE8以上，跨域请求数据的方式）

cors的jq用法

4.document.domain + iframe （能力有限:同一网站的二级页面之间数据传递）

前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

有另一种情况，两个子域名：

只要能将document.domain改成一样的就可以跨域

关于iframe

5.postMessage（HTML5中的XMLHttpRequest Level 2中的API实现页面件的数据传递）

6.web sockets：（只有在支持web socket协议的服务器上才能正常工作，与http的长连接的区别是：这个协议是双向的）

相关阅读更多精彩内容

友情链接更多精彩内容

前端跨域的6种方式

同源策略

跨域

1.JSONP （需要后台配合）------(向后台请求数据的跨域)

原生封装

jquery的JSONP

es6+promise封装JSONP

2.Proxy代理 ：（接口的临时代理，解决跨域）

3.cors（兼容性IE8以上，跨域请求数据的方式 ）

cors的jq用法

4.document.domain + iframe （能力有限:同一网站的二级页面之间数据传递）

前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

有另一种情况，两个子域名：

只要能将document.domain改成一样的就可以跨域

关于iframe

5.postMessage（HTML5中的XMLHttpRequest Level 2中的API实现页面件的数据传递）

6.web sockets：（只有在支持web socket协议的服务器上才能正常工作，与http的长连接的区别是：这个协议是双向的）

相关阅读更多精彩内容

友情链接更多精彩内容

2.Proxy代理：（接口的临时代理，解决跨域）

3.cors（兼容性IE8以上，跨域请求数据的方式）