1. 程式人生 > >前端常見的跨域解決方案

前端常見的跨域解決方案

params 分離 true local img 原生 AI spa 共享

什麽是跨域:

一個域名下的文檔或者腳本試圖請求另外一個域名的下的資源

廣義的跨域:

資源跳轉:a鏈接、重定向、表單提交

資源嵌入:<link> <script> <img>等dom標簽

腳本請求:js發起的ajax請求,dom和js的跨域操作

其實就是瀏覽器的同源策略導限制的一類請求場景

什麽是同源策略:

他是瀏覽器最核心的安全功能,所謂的同源策略就是:協議+域名+端口,三者相同,即便兩個相同的不同的域名指向相同的ip,也非同源

同源測略限制了以下幾種行為:

cookie、localSotorage無法讀取

Dom和js對象無法獲得

ajax請求不能發送

常見的跨域場景

技術分享圖片

跨域解決方案:

1、 通過jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域資源共享(CORS)
7、 nginx代理跨域
8、 nodejs中間件代理跨域
9、 WebSocket協議跨域

一、通過jsonp跨域

為了減輕web服務器的負載,我們把js、css、img等靜態資源分離到一臺獨立的域名的服務器上,在html特免中在通過相應的標簽從不同的域名下加載靜態資源,而被瀏覽器允許,基於此原理。我們可以通過動態創建script。再請求一個帶有網址的實現跨域通訊。

1)原生實現

<script>

var script=document.creatElement(‘script‘);

script.type=‘text/javascript‘;

//傳參並指定回調執行函數為onback

script.src=‘

http://www.domain2.com:8080/login?user=admin&callback=onBack‘

document.head.appendChild(script);

//回調執行函數

function onback(res){

console.log(JSON.stringify(res));

}

</script>

服務器返回如下(返回時就執行全局函數)

onback({‘status’:true,‘user‘:‘adimin‘})

2)jquery ajax

$.ajax({

url:‘

http://www.domain2.com:8080/login

‘,

type:‘get‘,

dataType:‘jsonp‘, //請求方式為jsonp

jsonpCallback:"onback" //自定義回調函數名

data:{}

})

3)vue

this.$http.jsonp(‘

http://www.domain2.com:8080/login

‘,{

params:{},

jsonp:‘onback‘

}).then((res)=>{

console.log(res)

})

前端常見的跨域解決方案