jsonp跨域
jsonp的實現原理：
(1).客戶端動態建立,借助script傳送請求，並給伺服器端傳遞乙個callback函式
(2).伺服器端接收傳來的callback中的函式，將要返回的資料作為引數放入到函式名中，並轉換為字串返回給客戶端。客戶端接收到返回的資訊就會執行這個函式。
jsonp實現跨域
客戶端
$.
ajax(}
)
let express=
require
("express"
)express()
//建立伺服器服務
listen
(8001
,_=>
)get
('/list'
,(req,res)
=>
=req.query //接收客戶端傳遞過來的callback引數
let data=
res.
send(`
$($)`
)//返回的內容
})
客戶端傳送ajax/fetch請求
axios.
get(
"").
then
( res =>
)
設定相關的頭資訊(需要處理options試探性請求)
配合webpack ,webpack-dev-server 實現
傳送請求
axios.
get(
"/user/list").
then
( res =>
)
devserver:
}}
不需要前端處理
postmessage
window.postmessage() 方法可以安全地實現跨源通訊。乙個視窗可以獲得對另乙個視窗的引用，然後在視窗上呼叫targetwindow.postmessage() 方法分發乙個 messageevent 訊息。接收訊息的視窗可以根據需要自由處理此事件。
otherwindow.postmessage(message, targetorigin, [transfer]);
otherwindow
其他視窗的乙個引用，比如iframe的contentwindow屬性、執行window.open返回的視窗物件、或者是命名過或數值索引的window.frames。
message
將要傳送到其他 window的資料。
targetorigin
通過視窗的origin屬性來指定哪些視窗能接收到訊息事件，其值可以是字串"*"（表示無限制）或者乙個uri。
transfer
是一串和message 同時傳遞的 transferable 物件. 這些物件的所有權將被轉移給訊息的接收方，而傳送一方將不再保有所有權。
實現postmessage跨域
客戶端a,埠號為1001
"iframe" src=
"" frameborder=
"0" style=
"display: none;"
>
<
/iframe>
獲取b.html的內容
ifram.
onload
=function()
//監聽b傳遞過來的資訊
window.
onmessage
=function
(ev)
<
/script>
監聽a傳遞過來的資訊
window.
onmessage
=function
(ev)
websocket是客戶端與伺服器段實時通訊的協議
客戶端
前端解決跨域的方法
什麼事跨域？跨域就是 當乙個請求url的協議 網域名稱 埠三者之間任意乙個與當前頁面url不同即為跨域，跨域一般會報錯 跨域有兩種解決方法 方法一 access control allow origin 這個是在伺服器 裡面寫的，內容大致為是否允許跨域，那些東西允許跨域 let express re...
前端跨域的幾種方法
前段的跨域同源策略是什麼呢?同源指的是三個同源 1，協議相同，網域名稱相同，埠相同，例如這些 協議是http 網域名稱是172.0.0.1 埠號是8080，在這三個都相同的話就是同源，如果不相同,就存在了跨域.一.jsonp跨域請求 首先我們要知道,jsonp跨域的原理是什麼呢,我們的ajax請求會...
前端面試之跨域問題
同源策略是一種約定。同源是指 協議 網域名稱 埠 三者相同，就算兩個不同的網域名稱指向同乙個ip位址，也不屬於同源。同源策略限制以下幾種行為 為什麼要使用同源策略？同源策略主要是來防止csrf攻擊的，csrf攻擊是指利用使用者的登陸狀態發起惡意請求。但是同源策略並不能完全防止csrf。跨域是指瀏覽器...