什麼是JS跨域訪問？

跨域指的是什麼，該如何跨域取到數據

---

A上的頁面獲取B上的資源，瀏覽器會檢查伺服器B的HTTP頭(HEAD請求)，如果Access-Control-Allow-Origin中有A，或者是通配符*，瀏覽器就會允許跨域。這叫CORS，具體請看 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

---

比較經典的問題了。

看看我們之前的文章

大轉轉FE - 跨域的那些事兒

前言

最近做項目的時候遇到了一些跨域問題，雖然網上對於跨域的問題分享還挺多的。不過當我實際遇到的時候還是有點懵。趁項目剛上線完，寫篇文章總結下。

造成跨域的兩種策略

瀏覽器的同源策略會導致跨域，這裡同源策略又分為以下兩種

1. DOM同源策略：禁止對不同源頁面DOM進行操作。這裡主要場景是iframe跨域的情況，不同域名的iframe是限制互相訪問的。
2. XmlHttpRequest同源策略：禁止使用XHR對象向不同源的伺服器地址發起HTTP請求。

只要協議、域名、埠有任何一個不同，都被當作是不同的域，之間的請求就是跨域操作。

為什麼要有跨域限制

了解完跨域之後，想必大家都會有這麼一個思考，為什麼要有跨域的限制，瀏覽器這麼做是出於何種原因呢。其實仔細想一想就會明白，跨域限制主要是為了安全考慮。

AJAX同源策略主要用來防止CSRF攻擊。如果沒有AJAX同源策略，相當危險，我們發起的每一次HTTP請求都會帶上請求地址對應的cookie，那麼可以做如下攻擊：

1. 用戶登錄了自己的銀行頁面 http://mybank.com，http://mybank.com向用戶的cookie中添加用戶標識。
2. 用戶瀏覽了惡意頁面 http://evil.com。執行了頁面中的惡意AJAX請求代碼。
3. http://evil.com向http://mybank.com發起AJAX HTTP請求，請求會默認把http://mybank.com對應cookie也同時發送過去。
4. 銀行頁面從發送的cookie中提取用戶標識，驗證用戶無誤，response中返回請求數據。此時數據就泄露了。
5. 而且由於Ajax在後台執行，用戶無法感知這一過程。

DOM同源策略也一樣，如果iframe之間可以跨域訪問，可以這樣攻擊：

1. 做一個假網站，裡面用iframe嵌套一個銀行網站 http://mybank.com。
2. 把iframe寬高啥的調整到頁面全部，這樣用戶進來除了域名，別的部分和銀行的網站沒有任何差別。
3. 這時如果用戶輸入賬號密碼，我們的主網站可以跨域訪問到http://mybank.com的dom節點，就可以拿到用戶的輸入了，那麼就完成了一次攻擊。

所以說有了跨域跨域限制之後，我們才能更安全的上網了。

跨域的解決方式

&> 跨域資源共享

CORS是一個W3C標準，全稱是」跨域資源共享」（Cross-origin resource sharing）。 對於這個方式，阮一峰老師總結的文章特別好，希望深入了解的可以看一下http://www.ruanyifeng.com/blog/2016/04/cors.html。

這裡我就簡單的說一說大體流程。

1. 對於客戶端，我們還是正常使用xhr對象發送ajax請求。
   唯一需要注意的是，我們需要設置我們的xhr屬性withCredentials為true，不然的話，cookie是帶不過去的哦，設置： xhr.withCredentials = true;
2. 對於伺服器端，需要在 response header中設置如下兩個欄位:

   Access-Control-Allow-Origin: http://www.yourhost.com

   Access-Control-Allow-Credentials:true
   這樣，我們就可以跨域請求介面了。

&> jsonp實現跨域

基本原理就是通過動態創建script標籤,然後利用src屬性進行跨域。

這麼說比較模糊，我們來看個例子:

// 定義一個fun函數
function fun(fata) {
console.log(data);
};
// 創建一個腳本，並且告訴後端回調函數名叫fun
var body = document.getElementsByTagName("body")[0];
var script = document.gerElement("script");
script.type = "text/javasctipt";
script.src = "demo.js?callback=fun";
body.appendChild(script);


返回的js腳本，直接會執行。所以就執行了事先定義好的fun函數了，並且把數據傳入了進來。

fun({"name": "name"})


當然，這個只是一個原理演示，實際情況下，我們需要動態創建這個fun函數，並且在數據返回的時候銷毀它。

因為在實際使用的時候，我們用的各種ajax庫，基本都包含了jsonp的封裝，不過我們還是要知道一下原理，不然就不知道為什麼jsonp不能發post請求了~

&> 伺服器代理

瀏覽器有跨域限制，但是伺服器不存在跨域問題，所以可以由伺服器請求所要域的資源再返回給客戶端。

伺服器代理是萬能的。

&> document.domain來跨子域

對於主域名相同，而子域名不同的情況，可以使用document.domain來跨域 這種方式非常適用於iframe跨域的情況，直接看例子吧 比如a頁面地址為 http://a.yourhost.com b頁面為 http://b.yourhost.com。 這樣就可以通過分別給兩個頁面設置 document.domain = http://yourhost.com 來實現跨域。 之後，就可以通過 parent 或者 window[『iframename』]等方式去拿到iframe的window對象了。

使用window.name進行跨域

window.name跨域同樣是受到同源策略限制，父框架和子框架的src必須指向統一域名。window.name的優勢在於，name的值在不同的頁面(或者不同的域名)，載入後仍然存在，除非你顯示的更改。並且支持的長度達到2M.

//a頁面的代碼
&

如何實現跨域取到數據，LS說的JSONP是最為常見，你可以參考這篇文章 跨域與跨域訪問

---

ajax或者iframe指向的地址中，二級域名、埠、協議必須與主頁面完全相同，否則就算跨域

比如

a.baidu.com訪問b.baidu.com 是跨域；
a.baidu.com:8080訪問a.baidu.com:80 是跨域；
http://a.baidu.com訪問https://a.baidu.com 是跨域


ajax跨域，兩種辦法：後端寫個代理介面，讓後端去抓數據；或者與對方合作，用jsonp等方式傳送數據

iframe跨域問題有點多，必須要得到iframe內部頁面的配合才可能通信，方法也比較多：

1，假寫hash值通信，父子頁面各自建立輪詢去檢測iframe中url的hash值，通過值來通信

2，利用HTML5的postMessage，不過注意這個也是非同步的

3，利用IE67中對navigator的bug，我前同事發現的，在ie6/7中，父子頁面使用的window.navigator是同一個東西，父頁面改了，子頁面也會跟著變；

4，iframe中嵌套一層與頂層頁面同域的頁面，比如a中套b，b中套c，其中a、c同域，b做出改變後通過url給c傳值，c中操作top對象也就是a，由於同域，所以不會有問題

5，我不知道的其他辦法...

---

jsonp,

ajax(header("Access-Control-Allow-Orgin:http://...."))

window.name+iframe

window.location.hash+iframe

html5 postMessage+ifrme

目前就知道這五個，

jsonp最常見

---

協議，埠，域名任一不同即跨域

跨域通信手段大概有：jsonp，document.domain，window.name，hash傳值，possMessage，Access-Control-Allow-Origin

看起來方法挺多，但是應用場景都有一定要求，按需使用吧

---

推薦一篇自己寫的文章：說說跨域那些事兒 | Itoss，裡面講了各種跨域的情況，解決方案，以及每一種方案的關鍵點、優劣勢、使用方法、兼容性等，可以參考！

---

LS說的都很對，還有一點比較重要，限制跨域是瀏覽器的行為，而不是JS的行為，你也可以自己開發一個瀏覽器，或者拿開源代碼改，使得自己開發的瀏覽器能夠跨域。

---

舉個栗子：

---

寫了一些簡單的小demo，可以快速入門跨域。跨域demo包括CORS、JSONP、Proxy後端代理、html5新特性postMessage、window.name、location.hash、document.domain、websocket。

github地址：

FatDong1/cross-domaingithub.com

---

URL說明是否允許通信http://www.a.com/a.js

http://www.a.com/b.js同一域名下允許http://www.a.com/lab/a.js

http://www.a.com/script/b.js同一域名下不同文件夾允許http://www.a.com:8000/a.js

http://www.a.com/b.js同一域名，不同埠不允許http://www.a.com/a.js

https://www.a.com/b.js同一域名，不同協議不允許http://www.a.com/a.js

http://70.32.92.74/b.js域名和域名對應ip不允許http://www.a.com/a.js

http://script.a.com/b.js主域相同，子域不同不允許http://www.a.com/a.js

http://a.com/b.js同一域名，不同二級域名（同上）不允許（cookie這種情況下也不允許訪問）http://www.cnblogs.com/a.js

http://www.a.com/b.js不同域名不允許

---

跨域資源共享 CORS 系列文章：

從跨域到 CORS (一)

CORS 進階之 Preflight 請求 (二)

CORS 進階之設置請求頭信息 (三)

CORS 進階之 cookie 處理 (四)

CORS 進階之 Expose-Headers (五)

---

就是瀏覽器不允許當前頁面的所在的源去請求另一個源的數據。源的定義:協議+二級域名+埠確定一個源。

---

那這樣的話數據會不會衝突了？

---

JS 沒有跨不跨域的問題，題目應該改成「什麼是瀏覽器的跨域訪問？」

---

推薦閱讀：