前端常見的跨域解決方案
什麽是跨域:
一個域名下的文檔或者腳本試圖請求另外一個域名的下的資源
廣義的跨域:
資源跳轉: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)
})
前端常見的跨域解決方案