javascript跨域：什麼是跨域，如何跨域(轉載自小鬍子哥)

---恢復內容開始---

　　無數次看到：Origin null is not allowed by Access-Control-Allow-Origin , 網絡沒有讓你絕望，可是或許會讓你蛋疼，由於你找了半天沒看到一個比較實用的解決方案，亦或者水平不夠，別人寫的東西累贅沒看懂，抑或是。。。

　　網上看到了一篇文章——跨域資源共享的10中方式，已經放在本身的家裏了O(∩_∩)O~

　　跨域也是平時項目中比較讓人頭疼的一個玩意兒，上文只是簡要地提出了有哪些跨域方式，這裏呢，將向你們詳細說明，各類使用頻率比較高的跨域方式。

　　什麼是跨域：

A cross-domain solution (CDS) is a means of information assurance that provides the ability to manually or automatically access or transfer between two or more differing security domains.

　　上面是從wiki上引用過來的。意思是：解決兩個安全域之間的信息傳遞，這個就叫作CDS——跨域解決方案。首先解釋下怎麼樣的兩個域之間的數據傳輸須要跨越。

 

What [什麼是跨域]

　　JavaScript出於安全方面的考慮，不容許跨域調用其餘頁面的對象。但在安全限制的同時也給注入iframe或是ajax應用上帶來了很多麻煩。這裏把涉及到跨域的一些問題簡單地整理一下：

　　首先什麼是跨域，簡單地理解就是由於JavaScript同源策略的限制，a.com 域名下的js沒法操做b.com或是c.a.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	不一樣域名	不容許

 

same-origin policy [同源策略]

　　在客戶端編程語言中，如javascript和ActionScript，同源策略是一個很重要的安全理念，它在保證數據的安全性方面有着重要的意義。同源策略規定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操做另一個域的絕大部分屬性和方法。

　　那麼什麼叫相同域，什麼叫不一樣的域呢？當兩個域具備相同的協議(如http), 相同的端口(如80)，相同的host（如www.example.org)，那麼咱們就能夠認爲它們是相同的域。好比http://www.example.org/和http://www.example.org/sub/是同域，而http://www.example.org, https://www.example.org, http://www.example.org:8080, http://sub.example.org中的任何兩個都將構成跨域。同源策略還應該對一些特殊狀況作處理，好比限制file協議下腳本的訪問權限。本地的html文件在瀏覽器中是經過file協議打開的，若是腳本能經過file協議訪問到硬盤上其它任意文件，就會出現安全隱患，目前IE8還有這樣的隱患。

　　受到同源策略的影響，跨域資源共享就會受到制約。可是隨着人們的實踐和瀏覽器的進步，目前在跨域請求的技巧上，有不少寶貴經驗的沉澱和積累。這裏我把跨域資源共享分紅兩種，一種是單向的數據請求，還有一種是雙向的消息通訊。

 

　JSONP（JSON with padding）是JSON的一種「使用模式」，它是非官方協議容許在服務器端集成Script tags返回至客戶端，經過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。

　　P.S：

　　　　1.樓主懂一點點php，因此DEMO中的後臺語言就用PHP來演示。

　　　　2.爲了方便測試，樓主弄了SAE和BAE。

 

Prelude [前奏]

　　若是咱們請求一個JSON數據：（SAE地址：http://qianduannotes.sinaapp.com/test/testData_1.json）

//一個簡單的json數據
{
    "name" : "靖鳴君",
    "sex"    : "男",
    "hobby": "女"
}

　　報個什麼錯，你們應該知道了吧~ 

Origin null is not allowed by Access-Control-Allow-Origin

　　先解釋下這個null是個什麼東東。不少人在測試的時候是在沒有諸如apache、IIS環境下運行的程序，也就是在本地運行，此時origin就是null，全部Access-Control-Allow-Origin這個東西不容許源null請求數據。固然若是你測試的時候在apache下運行，那這裏的null就會變成你的IP了~

 

Then [接着]

　　JSONP，咱們開始入題吧~ 

　　先說說後臺返回個什麼東西：（SAE地址：http://qianduannotes.sinaapp.com/test/CDS_jsonp.json）

<?php
    $fun = $_GET["woo"];  //先假設woo對應的是 trigger ；
    $ctt = "靖鳴君";
    echo $fun . "(" . $ctt . ")";
?>

　　後臺數據解析以後就是這樣的：

trigger(木子Vs立青)

　　有人就要開始驚歎了，腫麼是 木子Vs立青 ，沒有引號包住？？是的，沒有引號，當$ctt是一個json數據的時候，咱們獲得的結果就是：

trigger(JSON)

　　而後用一些熟知的方法來解析這些JSON（下次會講解如何解析JSON）。

　　說了半天仍是沒講客戶端的操做，O(∩_∩)O~  不急不急。

<script type="text/javascript" src="http://qianduannotes.sinaapp.com/test/CDS_jsonp.php?woo=trigger"></script>
<script type="text/javascript">
    function trigger(obj){
　　　　//注：這裏只是隨便寫的一個函數，obj是爲解析的。
　　　　//obj = parse(obj);
　　　　document.getElementById("container").innerHTML = obj;
　　}
</script>

　　習慣上jsonp請求時，會使用jsonp爲參數，即jsonp=trigger，我以爲都無所謂啦，只要你用的爽就行。

　　若是你想傳更多參數，那也是同樣的：

<script type="text/javascript" src="http://qianduannotes.sinaapp.com/test/CDS_jsonp.php?woo=trigger&a=va&b=vb&c=vc"></script>

 

Attention [注意事項]

　　1.第一也是最重要的：JSONP不提供錯誤處理。若是動態插入的代碼正常運行，你能夠獲得返回，可是若是失敗了，那麼什麼都不會發生。你沒法得到一個404的錯誤，也不能取消這個請求。

　　2.另一個重要的缺點是若是使用了不信任的服務會形成很大的安全隱患。

---恢復內容結束---