摘要：簡(jiǎn)單地理解就是因?yàn)橥床呗缘南拗疲菫g覽器為了安全性考慮一種非常重要的策略，域名下的無法操作或是域名下的對(duì)象。同源策略會(huì)限制以下三種行為和無法讀取。例如中可以引用等資源，此類操作不受同源策略限制。

同源策略same origin policy中的重要內(nèi)容就是URL（uniform resource locator）,統(tǒng)一資源定位符，俗稱網(wǎng)址。URL中的resource資源就是css,js,html,img等內(nèi)容。

源包括當(dāng)前頁(yè)面的域名、協(xié)議、端口號(hào)。http協(xié)議默認(rèn)端口是80，https協(xié)議默認(rèn)端口是443。同源策略是瀏覽器的一個(gè)安全機(jī)制功能，Same Origin Policy，同源就是當(dāng)協(xié)議、域名、端口號(hào)一致時(shí)就是同源。不同源的客戶端腳本在沒有明確授權(quán)下，不能讀寫對(duì)方的資源。簡(jiǎn)單地理解就是因?yàn)橥床呗缘南拗?，它是瀏覽器為了安全性考慮一種非常重要的策略，a.com 域名下的js無法操作b.com或是c.a.com域名下的對(duì)象。更詳細(xì)的說明可以看下表：

瀏覽器基于用戶的隱私安全目的，防止惡意網(wǎng)站竊取數(shù)據(jù)（只是瀏覽器有這個(gè)同源策略設(shè)置，但是用命令行curl請(qǐng)求某個(gè)跨域地址時(shí)能得到相應(yīng)結(jié)果），不允許不同域名的網(wǎng)站之間互相調(diào)用ajax XHR對(duì)象，只是不允許XHR對(duì)象，對(duì)其他的圖片、js腳本、css腳本還是可以通過標(biāo)簽跨域調(diào)用。所以css/js/img可以跨域請(qǐng)求(即引用)，AJAX不能請(qǐng)求跨域的資源。
curl http://www.abc.com 用這個(gè)命令獲得了http://www.abc.com指向的頁(yè)面，同樣，如果這里的URL指向的是一個(gè)文件或者一幅圖都可以直接下載到本地。如果下載的是HTML文檔，那么缺省的將不顯示文件頭部，即HTML文檔的header。要全部顯示，請(qǐng)加參數(shù) -i，要只顯示頭部，用參數(shù) -I。任何時(shí)候，可以使用 -v 命令看curl是怎樣工作的，它向服務(wù)器發(fā)送的所有命令都會(huì)顯示出來。為了斷點(diǎn)續(xù)傳，可以使用-r參數(shù)來指定傳輸范圍。

【1】 Cookie、LocalStorage 和 IndexedDB 無法讀取。Cookie 是服務(wù)器寫入瀏覽器的一小段信息，只有同源的網(wǎng)頁(yè)才能共享。
【2】 DOM 無法獲得。
【3】 AJAX 請(qǐng)求無效（可以發(fā)送，但瀏覽器會(huì)拒絕接受響應(yīng)）。

主域名 abc.com
www.abc.com //www是子域名
bbs.abc.com //bbs是子域名
beijing.bbs.abc.com //beijing.bbs是子域名
haidian.beijing.bbs.abc.com //haidian.beijing.bbs是子域名
主域名是不帶www的域名，例如a.com，主域名前面帶前綴的通常都為二級(jí)域名或多級(jí)域名，例如www.a.com其實(shí)是二級(jí)域名。

解決跨域問題的兩個(gè)前提特別注意：
第一，如果是協(xié)議和端口造成的跨域問題“前端”無法解決。
第二：在跨域問題上，域僅僅是通過“URL的首部”來識(shí)別而不會(huì)去嘗試判斷相同的ip地址對(duì)應(yīng)著兩個(gè)域或兩個(gè)域是否在同一個(gè)ip上。比如在host文件中可將兩個(gè)不同域名綁定到同一個(gè)IP地址上形成跨域。
“URL的首部”可在console.log控制臺(tái)中用window.location.方法名獲取

跨域就是用某種方法突破同源策略的限制，實(shí)現(xiàn)獲取其他域中的資源。實(shí)現(xiàn)跨域一般有四種方法：

JSONP(json with padding)方式, 通過script標(biāo)簽請(qǐng)求資源,允許用戶在scr地址中傳遞一個(gè)callback參數(shù)（callback=abc）即將預(yù)先定義好的回調(diào)函數(shù)名以查詢字符串的形式傳遞給服務(wù)端，服務(wù)端收到請(qǐng)求后會(huì)將要返回的數(shù)據(jù)用這個(gè)callback參數(shù)(abc)包裹住再返回，即將請(qǐng)求傳入的參數(shù)abc作為函數(shù)名來包裹住要返回的JSON數(shù)據(jù)，比如abc(JSON)，這樣客戶端在收到服務(wù)端返回的abc(JSON)文件后默認(rèn)用JS解析執(zhí)行。通過JSONP就可以隨意定制自己的函數(shù)來自動(dòng)處理返回?cái)?shù)據(jù)了。

jsonp的原理：雖然瀏覽器默認(rèn)禁止了跨域訪問，但并不禁止在頁(yè)面中script標(biāo)簽引用其他域下的JS文件，比如線上jquery庫(kù)，并可以自由執(zhí)行引入的JS文件中的function（包括操作cookie、Dom等等）。根據(jù)這一點(diǎn)，可以方便地通過動(dòng)態(tài)創(chuàng)建script節(jié)點(diǎn)的方法來實(shí)現(xiàn)完全跨域的通信。例如a.com/index.html中可以引用b.com/main.js、b.com/style.css、b.com/logo.png等資源，此類操作不受同源策略限制。實(shí)際操作中如果在a.com下用ajax去請(qǐng)求（讀寫）b.com下的內(nèi)容會(huì)被同源策略阻止，但a.com里如果引用了b.com/main.js，雖然可以引用，但當(dāng)這個(gè)引用的js文件（在a.com下引用）去讀寫（ajax）b.com的資源時(shí)一樣會(huì)提示ajax錯(cuò)誤。注意讀寫和引用有本質(zhì)區(qū)別的，受同源策略限制ajax不能（POST寫/GET讀）請(qǐng)求跨域內(nèi)容，但可以通過script引用的方式獲取目標(biāo)域上js文件，如果在這個(gè)被引用的JS文件內(nèi)存放數(shù)據(jù)，這樣就能從目標(biāo)域獲取到數(shù)據(jù)了，這就是JSONP實(shí)現(xiàn)的原理。
JSONP與JSON沒有關(guān)系。JSON是規(guī)定語(yǔ)法的一種字符串的寫法。JSONP（json with padding），這里的padding就是被請(qǐng)求的目標(biāo)域B域返回的數(shù)據(jù)其外層包裹的A域預(yù)先定義好的函數(shù)+括號(hào)。JSONP就是動(dòng)態(tài)的script,即A域前臺(tái)傳什么callback=abc給B域名后臺(tái)，B域就生成對(duì)應(yīng)的abc方法，這個(gè)方法的執(zhí)行過程是A域預(yù)先定義好的
jsonp的缺點(diǎn)：
1.安全問題，src引用是開放的，所以jsonp的資源都被所有人訪問到。解決方法是用jsonp中的token參數(shù)，通過A域和B域共用同一套cookie來驗(yàn)證A的身份。
2.只能用GET方式不能用POST方式獲取數(shù)據(jù)即只能讀不能寫，因?yàn)槭腔趕cr引用的，引用是get請(qǐng)求。
3.可被注入惡意代碼如?callback=alert(1); 這問題只能用正則過濾字符串的方法解決，過濾callback后的內(nèi)容不能有括號(hào)之類的條件

JSONP的實(shí)現(xiàn)代碼如下：
1.定義數(shù)據(jù)處理函數(shù)

appendHtml(){
    xxxxx
}

2.創(chuàng)建script標(biāo)簽，src的地址執(zhí)行后端接口，最后加個(gè)參數(shù)callback=appendHtml.如：

var script=document.createElement("script")
script.src="http://127.0.0.1/getNews?callback=appendHtml"

3.服務(wù)端在收到請(qǐng)求后，解析參數(shù)，計(jì)算返還數(shù)據(jù)，輸出 appendHtml(data) 字符串。
4.前臺(tái)頁(yè)面收到服務(wù)端返回的appendHtml(data)字符串所構(gòu)建的script標(biāo)簽，頁(yè)面加載這個(gè)script標(biāo)簽時(shí)做為js執(zhí)行。此時(shí)會(huì)調(diào)用appendHtml()函數(shù)，將data做為參數(shù)。
注意：JSONP實(shí)現(xiàn)的前提是后端必須有JSONP的API接口，即后端有將前端傳入的參數(shù)作為函數(shù)名包裹數(shù)據(jù)返回js文件的邏輯。如：

var data=[{"a":1,"b":2}]
var cb=req.query.callback;
if(cb){
    res.send(`${cb}(JSON.stringify(${data}))`)
}else{
    res.send(`${data}`)
}

需后臺(tái)配合，代碼如下圖

    function jsonp(url,_callback){
        var scriptNode=document.createElement("script")
        scriptNode.setAttribute("type","text/javascript")
        scriptNode.setAttribute("src",`${url}?callback=${_callback}`)
        document.head.appendChild(scriptNode)
    }
            
    function getMusic(content){ /*定義數(shù)據(jù)返回時(shí)所執(zhí)行的回調(diào)函數(shù)*/
        console.log(content.song[0])
        var comeMusic=content.song[0],
            musicTitle=comeMusic.title,
            musicArtist=comeMusic.artist,
            imgSrc=comeMusic.picture,
            _src=imgSrc.match(/.[^@]*/g)[0] /*正則匹配返回的圖片地址*/
            console.log(_src)
    
            imgNode.src=_src
            h3Node.innerText=musicTitle
            h6Node.innerText=musicArtist
    }

調(diào)用jsonp函數(shù)：
jsonp(http://www.aaa.com,getMusic)

CORS允許瀏覽器向跨域服務(wù)器發(fā)出XMLHttpRequest請(qǐng)求，突破了AJAX只能同源使用的限制。CORS需要瀏覽器和服務(wù)器同時(shí)支持，目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。CORS原理：瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息，有時(shí)還會(huì)多出一次附加的請(qǐng)求，但用戶不會(huì)有感覺。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信。
以nodejs server-mock后臺(tái)為例：
res.header("Accept-Control-Allow-Origin","http://www.a.com:8080")//只允許http://www.a.com:8080這個(gè)源發(fā)起的請(qǐng)求
res.header("Accept-Control-Allow-Origin","*")//允許所有源發(fā)起的請(qǐng)求

瀏覽器將跨域請(qǐng)求分為兩類
簡(jiǎn)單請(qǐng)求（simple request），同時(shí)滿足以下兩個(gè)條件
【1】請(qǐng)求方法是HEAD/GET/POST之一
【2】HTTP請(qǐng)求頭信息不超出以下幾種字段
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三個(gè)值application/x-www-form-urlencoded、multipart/form-data、text/plain

非簡(jiǎn)單請(qǐng)求（not-so-simple request），不滿足以上兩個(gè)條件的請(qǐng)求就是非簡(jiǎn)單請(qǐng)求
AJAX發(fā)起跨域請(qǐng)求時(shí)，如果是簡(jiǎn)單類型請(qǐng)求，請(qǐng)求頭信息如下：
GET /cors HTTP/1.1
Origin: http://api.bob.com //發(fā)起此次請(qǐng)求的所在源（協(xié)議+域名+端口號(hào)）
Host: api.alice.com //要訪問的目標(biāo)域
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
如果Origin指定的源，不在服務(wù)端許可范圍內(nèi)，服務(wù)器會(huì)返回一個(gè)正常的HTTP回應(yīng)。但這個(gè)響應(yīng)頭信息沒有包含Access-Control-Allow-Origin字段。瀏覽器接收后就知道出錯(cuò)了，從而拋出一個(gè)錯(cuò)誤，被XMLHttpRequest的onerror回調(diào)函數(shù)捕獲。這種錯(cuò)誤無法通過狀態(tài)碼識(shí)別，因?yàn)镠TTP回應(yīng)的狀態(tài)碼有可能是200。
如果Origin指定的域名在許可范圍內(nèi)，服務(wù)器返回的響應(yīng)，響應(yīng)頭會(huì)包含以下信息字段
Access-Control-Allow-Origin: http://api.bob.com //允許來自源http://api.bob.com的訪問，如果是*則代表允許來自所有源的訪問
Access-Control-Allow-Credentials: true //是否允許客戶端在請(qǐng)求中發(fā)送Cookie
Access-Control-Expose-Headers: FooBar //允許CORS請(qǐng)求拿到除默認(rèn)的Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma外的其他字段。這里允許拿到foobar字段信息。
Content-Type: text/html; charset=utf-8

CORS請(qǐng)求默認(rèn)不包含Cookie信息，如果需要包含Cookie信息，一方面要服務(wù)器同意
Access-Control-Allow-Credentials: true //但Access-Control-Allow-origin 不能是*
另一方面，開發(fā)者必須在AJAX請(qǐng)求中打開withCredentials屬性。
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
此時(shí)Cookie依然遵循同源政策，只有用服務(wù)器域名設(shè)置的Cookie才會(huì)上傳，其他域名的Cookie并不會(huì)上傳，且（跨源）原網(wǎng)頁(yè)代碼中的document.cookie也無法讀取服務(wù)器域名下的Cookie。

AJAX發(fā)起跨域請(qǐng)求時(shí)，如果是非簡(jiǎn)單類型請(qǐng)求，比如請(qǐng)求方法是PUT或DELETE，或者Content-Type字段的類型是application/json，非簡(jiǎn)單請(qǐng)求的CORS請(qǐng)求，會(huì)在正式通信之前，增加一次HTTP查詢請(qǐng)求，稱為“預(yù)檢”請(qǐng)求，瀏覽器先詢問服務(wù)器，當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中，以及可以使用哪些HTTP動(dòng)詞和頭信息字段。只有得到肯定答復(fù)，瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求，否則就報(bào)錯(cuò)。
比如js代碼如下：
var url = "http://api.alice.com/cors";
var xhr = new XMLHttpRequest();
xhr.open("PUT", url, true); //方法是PUT
xhr.setRequestHeader("X-Custom-Header", "value"); //自定義請(qǐng)求頭信息
xhr.send();
請(qǐng)求頭信息如下：
OPTIONS /cors HTTP/1.1 //方法是OPTIONS，表示這個(gè)請(qǐng)求是用來詢問的。
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
如果服務(wù)器否定了“預(yù)檢”請(qǐng)求，會(huì)返回一個(gè)正常的HTTP回應(yīng)，但是沒有任何CORS相關(guān)的頭信息字段。瀏覽器接收后就知道出錯(cuò)了，被XMLHttpRequest對(duì)象的onerror回調(diào)函數(shù)捕獲。
如果服務(wù)器接受了“預(yù)檢”請(qǐng)求，以后每次瀏覽器正常的CORS請(qǐng)求，就都跟簡(jiǎn)單請(qǐng)求一樣，會(huì)有一個(gè)Origin頭信息字段。服務(wù)器的回應(yīng)，也都會(huì)有一個(gè)Access-Control-Allow-Origin頭信息字段。服務(wù)器發(fā)送響應(yīng)頭信息如下：
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT //表明服務(wù)器支持的所有跨域請(qǐng)求的方法
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8

JSONP只支持GET請(qǐng)求，CORS支持所有類型的HTTP請(qǐng)求。JSONP的優(yōu)勢(shì)在于支持老式瀏覽器，以及可以向不支持CORS的網(wǎng)站請(qǐng)求數(shù)據(jù)。

HTML5中最酷的新功能之一就是 跨文檔消息傳輸Cross Document Messaging。下一代瀏覽器都將支持這個(gè)功能：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。 Facebook已經(jīng)使用了這個(gè)功能，用postMessage支持基于web的實(shí)時(shí)消息傳遞。

舉例，父窗口aaa.com向子窗口bbb.com發(fā)消息，調(diào)用postMessage方法如下：

var popup = window.open("http://bbb.com", "title");
popup.postMessage("Hello World!", "http://bbb.com");

postMessage方法的第一個(gè)參數(shù)是具體的信息內(nèi)容（支持任意類型），第二個(gè)參數(shù)是接收消息目標(biāo)窗口的源origin（協(xié)議 + 域名 + 端口）也可以設(shè)為*，表示不限制域名，向所有窗口發(fā)送。
子窗口向父窗口發(fā)送消息的寫法如下：
window.opener.postMessage("Nice to see you", "http://aaa.com");
父窗口和子窗口都可以通過message事件，監(jiān)聽對(duì)方的消息：

window.addEventListener("message", function(event) {
  console.log(e.data);
},false);

事件對(duì)象event的三個(gè)屬性：
event.source：發(fā)送消息的窗口對(duì)象，對(duì)發(fā)送消息的窗口對(duì)象的引用;
event.origin: 發(fā)送消息的窗口的源（協(xié)議、域名、端口號(hào)）這里不是接受消息的窗口的源
event.data: 消息內(nèi)容
event.origin屬性可以過濾不是發(fā)給本窗口的消息，舉例如下：
當(dāng)bbb網(wǎng)站收到來自aaa網(wǎng)站發(fā)來的消息

window.addEventListener("message", receiveMessage);
function receiveMessage(event) {
  if (event.origin !== "http://aaa.com") return;//判斷發(fā)消息的窗口的源是否是aaa網(wǎng)站的源，這里的event.origin和postMessage()方法中的origin不一樣?。?  if (event.data === "Hello World") {
      event.source.postMessage("Hello", event.origin);//這里event.origin指向aaa網(wǎng)站的源即消息接收的窗口的源
  } else {
    console.log(event.data);
  }
}

otherWindow.postMessage方法中，otherWindow是其他窗口的一個(gè)引用，比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對(duì)象、或者是命名過或數(shù)值索引的window.frames。即只能適用于open方法打開的頁(yè)面相互發(fā)送消息，或者通過iframe嵌套的頁(yè)面之間發(fā)送消息。通過window.postMessage()方法還可讀取其他窗口的LocalStorage
window.open("http://www.bbb.com:8881/b_index.html","title") //主頁(yè)面中打開子頁(yè)面
window.opener.postMessage(${msg},"http://www.aaa.com:8888") //引用打開子頁(yè)面的主頁(yè)面

當(dāng)兩個(gè)網(wǎng)頁(yè)一級(jí)域名相同，只是二級(jí)域名不同，瀏覽器允許通過設(shè)置document.domain來實(shí)現(xiàn)iframe窗口相互訪問或設(shè)置cookie。降域方式只適用于同一站點(diǎn)下不同子域名共享cookie或者iframe頁(yè)面中嵌套的子域名頁(yè)面之間的訪問。降域不適用訪問LocalStorage 和 IndexedDB，postMessage()方法可訪問LocalStorage
用改寫document.domain+iframe的方法來獲取目標(biāo)域數(shù)據(jù)。缺點(diǎn)是安全性差，一個(gè)頁(yè)面被攻擊后另一個(gè)頁(yè)面的數(shù)據(jù)也會(huì)被泄露且不支持ajax方式請(qǐng)求數(shù)據(jù)。降域只能解決主域相同而二級(jí)域名（子域名）不同的兩個(gè)頁(yè)面請(qǐng)求數(shù)據(jù)的情況，如果把script.a.com的domian設(shè)為alibaba.com那顯然是會(huì)報(bào)錯(cuò)。domain只能設(shè)置為主域名，不可以在b.a.com中將domain設(shè)置為c.a.com；且只能由子域名改到父域名或父父域名，不能從父父域名改到子域名（比如將b.com改成script.b.com是不行的）

舉例來說，A網(wǎng)頁(yè)是http://w1.example.com/a.html，B網(wǎng)頁(yè)是http://w2.example.com/b.html，子域名不同默認(rèn)情況下會(huì)被同源策略阻止訪問。只要將兩個(gè)頁(yè)面都設(shè)置相同的document.domain，兩個(gè)網(wǎng)頁(yè)就可以共享Cookie或在iframe窗口下相互訪問。
document.domain = "example.com";
服務(wù)器也可以在設(shè)置 Cookie 的時(shí)候，指定 Cookie 的所屬域名為一級(jí)域名以后二級(jí)域名和三級(jí)域名不用做任何設(shè)置，都可以讀取這個(gè)Cookie。比如.example.com。
Set-Cookie: key=value; domain=.example.com; path=/

降域的特點(diǎn)：只能對(duì)主域相同子域不同的iframe頁(yè)面和父頁(yè)面（或者open方法打開的主域相同的頁(yè)面）形式的跨域起作用，可實(shí)現(xiàn)的兩個(gè)頁(yè)面共享cookie。修改domain時(shí)top頁(yè)面和iframe頁(yè)面都要使用document.domain去修改成一致的域名。具體的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html兩個(gè)文件中分別加上document.domain = "a.com"；然后通過a.html文件中創(chuàng)建一個(gè)iframe，去控制iframe的contentDocument，這樣兩個(gè)js文件之間就可以“交互”了。驗(yàn)證步驟如下：
1.本地文件夾中有兩個(gè)文件index.html（www.a.com下的網(wǎng)頁(yè)）,b.html（script.a.com下的網(wǎng)頁(yè)），a.com下的index.html頁(yè)面中有iframe頁(yè)面(src="http://script.a.com:8080/b.html")
2.由于域僅僅是通過“URL的首部”來識(shí)別，不會(huì)判斷兩個(gè)不同域名是否為同一IP地址。根據(jù)這點(diǎn)，修改本地host文件增加兩行，子域名不同，主域名相同來模擬跨域。
127.0.0.1 www.a.com
127.0.0.1 script.a.com
3.用mock start命令啟動(dòng)服務(wù)器并分別訪問
http://www.a.com:8080/index.html
http://script.a.com:8080/b.html
兩個(gè)頁(yè)面console.log(document.domain)時(shí)分別返回www.a.com和script.a.com，此時(shí)是跨域狀態(tài)。
4.當(dāng)在www.a.com下的html頁(yè)面中執(zhí)行以下腳本時(shí)提示
var ccc=document.getElementsByTagName("iframe")[0].contentDocument

（注：.contentDocument方法可操作iframe頁(yè)面內(nèi)的信息）
5.解決方案：www.a.com下的index.html頁(yè)面和script.a.com下的b.html頁(yè)面中都增加腳本,將兩個(gè)頁(yè)面的域設(shè)置成相同的主域名

再次執(zhí)行var ccc=document.getElementsByTagName("iframe")[0].contentDocument
返回的就是b.html文件中的信息