跨域的几种方式

前后端如何通信:

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)
  })

阅读更多

没有更多推荐了,返回首页