跨域的几种方式

前后端如何通信：

Ajax

WebSocket

CORS

跨域通信的几种方式：

jsonp:

jsonp是利用了script标签不受同源策略限制的特性来实现跨域通信的。

js代码：

function jsonhandle(data){

alert("age:" + data.age + "name:" + data.name); } var url = "corresponded.php?id=1&callback=jsonhandle"; //将回调函数名传至PHP页面，再通过PHP页面返回这个函数（包含返回数据） var obj = document.createElement('script'); obj.setAttribute("src",url); document.getElementsByTagName('body')[0].appendChild(obj);

<?php
  $callback = $_GET['callback'];
  $data = array(
      'age' => 20,
      'name' => '张三',
  );
  echo $callback."(".json_encode($data).")";
?>

postMessage：HTML5专门为结局跨域中添加的；

A.js
window.postMessage('this is A.js possMessage ','http://B.com');    //第一个参数是传输的字符串（如果是对象，也转换为json字符串），第二个参数是目标URL

B.js
window.addEventListener('message',function(event){    //在B页面监听message事件即可
    if(event.origin === 'http://A.com'){
        console.log(event.data);    event.source.postmessage('recive data of A.js in B.js ', event.origin);
    }    //event.data表示传过来的数据;event.origin发送数据的地址;event.source发送数据的对象;
},false)

Hash: Hash就是URL里#后面的部分，Hash改变页面市不会刷新的。Search是URL里?后面的部分，Search的改变会刷新页面

A.html:
<iframe frameborder="0" id="myIframe" src="http://B.html"></iframe>

A.js:
var myIframe = document.getElementById('myIframe');
    myIframe.src = myIframe.src + '#' + 'data';

B.js:
window.onhashchange = function() {
      var data = window.location.hash;
    }

只需要在B.js中监控hash就可以了。

WebSocket：没有同源限制，可以与任意服务器通信。

var ws = new WebSocket("wss://echo.websocket.org"); 
ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};
ws.onclose = function(evt) {
  console.log("Connection closed.");
};

推荐看阮一峰的文章：

WebSocket

CORS：可以理解为可以跨域请求的Ajax,使用fetch发送发送异步请求,fetch跨域必须在后端设置相应的 `Access-Control-Allow-Origin` 即可得到数据。

fetch('https://c.y.qq.com').then((res)=>{
    console.log(res.data)
  }).catch((err)=>{
    console.log(err)
  })

猜你喜欢