什麽是跨域：

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

廣義的跨域：

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

資源嵌入：<link> <script> <ｉｍｇ>等ｄｏｍ標簽

腳本請求：ｊｓ發起的ａｊａｘ請求，ｄｏｍ和ｊｓ的跨域操作

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

什麽是同源策略：

他是瀏覽器最核心的安全功能，所謂的同源策略就是：協議+域名+端口，三者相同，即便兩個相同的不同的域名指向相同的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)

})

前端常見的跨域解決方案