前端不同伺服器之間的通訊前端跨域方案

所謂跨域，顧名思義，跨到了另外的域，域不僅僅指的是不同的網域名稱**，可能同乙個網域名稱不同的埠號也算不同的域。瀏覽器是有規則的，只要協議、網域名稱、埠有任何乙個不同，都被當作是不同的域。協議指的是 http，或者 https 等。

乙個域下的文件或指令碼試圖去請求另乙個域下的資源。

同源策略-sop(same origin policy)是一種約定，由 netscape 公司 1995 年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到 xss、csfr 等攻擊。所謂同源是指協議+網域名稱+埠三者相同，即便兩個不同的網域名稱指向同乙個 ip 位址，也非同源。

為了保證使用者資訊的安全，防止惡意的**竊取資料。

跨域場景

前端**：

後端**：

前端**：

$.ajax(})function mycallback(response)

後端**：

以上的方式看起來不錯，但遺憾的是僅支援 get 請求。

這個跨域僅限主域相同，子域不同的跨域應用場景。

兩個頁面都通過 js 強制設定document.domain為主域，就實現了同域。

父視窗**：

iframe>document.domain = 'example.com'  var content =   }script>

子視窗**：

document.domain = 'example.com'console.log(window.parent.content)

window.postmessage() 方法可以安全地實現 window 物件之間的跨域通訊。postmessage()方法允許來自不同源的指令碼採用非同步方式進行有限的通訊，可以實現跨文字檔、多視窗、跨域訊息傳遞。

傳送**：

documenttitle>head>iframe>    div>  div>  const domain = ''    let iframe = document.getelementbyid('frame')    iframe.onload = (e) =>       iframe.contentwindow.postmessage(json.stringify(data), domain)      console.group('mesage request from ' + document.location.href)      console.log(data)      console.groupend('adsfa')    }    window.addeventlistener('message', (e) => , false)script>body>html>

接收**：

documenttitle>head>const domain = ''    window.addeventlistener('message', (e) =>       let data = json.parse(e.data)      data.status = true;      data.message += ' world!'      data.result = {}      window.parent.postmessage(data, domain);    })script>body>html>

前端**：

documenttitle>head>input: div>  script>  const socket = io(':6001');    socket.on('connect', () => )      socket.on('disconnect', () => )    })    document.getelementbyid('input').onblur = (e) => script>body>html>

後端**：

<?php use phpsocketio\socketio;use workerman\worker;require __dir__ . '/../vendor/autoload.php';$socket = new socketio(6001);$socket->on('connection', function ($socket) );    $socket->on('discount', static function () );});worker::runall();

前端不同伺服器之間的通訊前端跨域方案

前端伺服器安裝

前端（伺服器應答）

前端（安卓）與伺服器通訊總結

前端不同伺服器之間的通訊 前端跨域方案

前端伺服器安裝

前端（伺服器應答）

前端（安卓）與伺服器通訊總結

相關推薦

前端不同伺服器之間的通訊前端跨域方案