什麼是跨域？為什麼要實現跨域呢？
這是因為JavaScript出於安全方面的考慮，不允許跨域調用其他頁面的對象。也就是說隻能訪問同一個域中的資源。我覺得這就有必要瞭解下javascript中的同源策略是怎麼回事瞭：javascript的同源策略
於是當我們想某些特定的功能的時候，實現合理的跨域請求就顯得比較重要瞭。
–>1.原生Ajax對象xhr的跨域
–>2.簡單jsonp
–>3.圖像Ping
–>4.document.domain+iframe實現跨域
javascript中的原生Ajax對象XMLHTTPRequest
先看原生ajax的實現代碼：
復制代碼
1 var xhr = createXHR();//for IE封裝一下瀏覽器不同的ajax對象
2 xhr.onload = function(event){ //確保接收到適當的響應
3 if((xhr.status >=200&&xhr.status<300)||xhr.status == 304){
4 alert(xhr.responseText);
5 }else{
6 alert('error:'+xhr.status);
7 }
8 }
9 xhr.open('get','**.php',true);//open方法的參數open(get/post,url,是否發送異步請求)
10 xhr.send(null);//open隻是啟動一個請求，並未發送，調用send()才會發送請求
復制代碼
我們知道想上面這樣就可以發送ajax請求啦，得到的響應數據會自動填充xhr對象的屬性，我們就可以去訪問啦。
但是，就是有上面說到的限制，隻能想同一個域中使用相同端口和協議的URL發送請求。然後就是解決跨域的問題瞭。
好在有個東西叫CORS（跨源資源共享），它背後的思想就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功還是失敗。
實現方法：
1.發送get/post請求時，給它添加一個額外的Origin頭部，其中包含請求頁面的源信息（協議，域名和端口），以便服務器根據這個頭部信息來決定是否響應，像這樣的：
Origin：https://www.nczonline.net
2.如果服務器認為這個請求可以接受，就在頭部發回相同的源信息：
Access-Control-Allow-Origin：https://www.nczonline.net
如果沒有這個頭部或者源信息不匹配，那麼服務器就會駁回請求，正常的情況下瀏覽器會處理請求。
深入研究CORS：HTTP access control (CORS)
另外，說到HTTP頭部相關，我覺得也有必要瞭解下通常的Request Headers和Response Headers通常都有哪些參數,它們會告訴我們很多信息的：
之所以想到瞭解，是因為記得看過這篇文章，小胡子利用瞭響應頭部的Date來實現瞭個倒計時：利用XMLHttpRequest響應頭的Date實現倒計時
JSONP（雙向）
1、什麼是JSONP：
jsonp（json with padding），jsonp與json看起來差不多，隻不過jsonp是被包含在函數調用中的json。jsonp由兩部分組成，一部分是回調函數，一部分是數據。回調函數就是當響應到來時應該在頁面中調用的函數，數據就是傳入回調函數中的json數據。他的優點是：第一，他能直接訪問響應文本；第二，jsonp支持在瀏覽器與服務器之間的雙向通信。但同時也存在缺點：它無法保證加載的來自其他域的代碼是安全的，還有就是無法判斷jsonp的請求是否失敗。
2、使用方法：
動態創建<script>節點：
復制代碼
1 function handleResponse(response){
2 alert("你的ip地址："+response.ip+"，ip地址所在的城市:"+response.city+",所在省份："+response.region_name);
3
4 }
5
6 var script = document.createElement('script');
7 script.src = 'https://freegeoip.net/json/?callback=handleResponse';/*https://freegeoip.net是一個jsonp地理定位服務*/
8 document.body.insertBefore(script,document.body.firstChild);
復制代碼
但是如何判斷script節點加載完畢是個問題：ie隻能通過script的readystatechange屬性，其他瀏覽器支持script的load事件。
如果用瞭jquery的話，就不用寫上面那些代碼瞭，jquery做瞭很多工作，調用$.ajax()方法的時候，如果想使用jsonp這種方法，封裝參數即可瞭。
移步這裡查看詳細：jQuery中的$.ajax()方法使用jsonp
圖像ping（單向）
1、什麼是圖像ping：
圖像ping是與服務器進行簡單、單向的跨域通信的一種方式，請求的數據是通過查詢字符串的形式發送的，而相應可以是任意內容，但通常是像素圖或204相應（No Content）。 圖像ping有兩個主要缺點：首先就是隻能發送get請求，其次就是無法訪問服務器的響應文本。
2、使用方法：
復制代碼
1 var img = new Image();
2 img.onload = img.onerror = function(){
3 alert("done!");
4 };
5 img.src = "/wp-content/images1/20190311/me531.jpg";
6 document.body.insertBefore(img,document.body.firstChild);
復制代碼
然後頁面上就可以顯示我放在我的github上某個地方的照片啦。
與<img>類似的可以跨域內嵌資源的還有:
(1)<script src=""></script>標簽嵌入跨域腳本。語法錯誤信息隻能在同源腳本中捕捉到。上面jsonp也用到瞭呢。
(2) <link src="">標簽嵌入CSS。由於CSS的松散的語法規則，CSS的跨域需要一個設置正確的Content-Type消息頭。不同瀏覽器有不同的限制： IE, Firefox, Chrome, Safari (跳至CVE-2010-0051)部分 和 Opera。
(3)<video> 和 <audio>嵌入多媒體資源。
(4)<object>, <embed> 和 <applet>的插件。
(5)@font-face引入的字體。一些瀏覽器允許跨域字體（ cross-origin fonts），一些需要同源字體（same-origin fonts）。
(6) <frame> 和 <iframe>載入的任何資源。站點可以使用X-Frame-Options消息頭來阻止這種形式的跨域交互。
document.domain+iframe實現跨域
首先要知道，隻是在頁面上通過<iframe>載入瞭資源，是不能與他交互的，像我的博客右邊的那個About中的那個Github的Fllow一樣的，隻能去訪問。那我們想要實現交互的話，對於主域相同而子域不同的情景，就可以借助於document.domain來實現。
www.one.com上的a.html：
復制代碼
1 document.domain = 'a.com';
2 var ifr = document.createElement('iframe');
3 ifr.src = 'https://script.a.com/b.html';
4 ifr.style.display = 'none';
5 document.body.appendChild(ifr);
6 ifr.onload = function(){
7 var doc = ifr.contentDocument || ifr.contentWindow.document;
8 // 在這裡操縱b.html
9 alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
10 };
復制代碼
w3w.one.com上的b.html：
document.domain = 'a.com';
這種方式就可以實現a頁面和b頁面交互瞭。適用於{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}這樣的域名下的頁面間，這裡默認他們使用相同的協議和端口。
備註：某一頁面的domain默認等於window.location.hostname。主域名是不帶www的域名，例如a.com，主域名前面帶前綴的通常都為二級域名或多級域名，例如www.a.com其實是二級域名。 domain隻能設置為主域名，不可以在b.a.com中將domain設置為c.a.com。
同時在修改document.domain的時候也需要註意一些問題，和可能產生的影響：修改document.domain可能產生的影響
這部分參考瞭這裡：js中跨域問題總結document.domain+iframe部分
這裡說到瞭document.domain,那麼我也就想到瞭document的其他屬性，放這一起看下：
(1)document.referrer 簡單來說,一般情況下瀏覽器請求A時發送的Header中Referer是什麼，那麼拿到A頁面後document.referre的值就是什麼.我們可以通過訪問document的這個屬性來知道我們的頁面是從哪裡來的。通常還能看到一些參數。
(2)document.links 它能得到頁面中所有<a>和<area>標簽中的href屬性值。
(3)document.compatMode 如果得到的值是CSS1Compat那麼是標準模式，BackCompat則是混雜模式
(4)document.readyState 文檔加載屬性 值為complete即加載完全 loading則正在加載。
上面隻舉例列瞭一些，其實還有很多很好用的，可以自行查閱手冊：document的屬性和方法
後面第二部分待總結的有：
–>5.利用iframe和location.hash
–>6.window.name跨域實現
–>7.HTML5 postMessage實現跨域