CORS（跨域資源共享）

前言：上一篇文章在寫如何使用JSONP實現跨域請求的時候，偶然間提到CORS，即Cross-Origin Resource Sharing（跨域資源共享）。雖然前些天也看了一下CORS相關的文章，可是今天興趣一來仍是親自地寫篇博客來研究一下吧。若是是關於技術的資料，我仍是比較喜歡看維基百科。至於百度百科，日常查查生活資料還行。讓咱們先看看比較官方的名詞解釋吧，請不要吐槽個人翻譯(⊙o⊙)…。

解釋：

　　Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated.^[1]

A web page may freely embed images, stylesheets, scripts, iframes, videos and some plugin content (such as Adobe Flash) from any other domain. However embeddedweb fonts and AJAX (XMLHttpRequest) requests have traditionally been limited to accessing the same domain as the parent web page (as per the same-origin security policy). "Cross-domain" AJAX requests are forbidden by default because of their ability to perform advanced requests (POST, PUT, DELETE and other types of HTTP requests, along with specifying custom HTTP headers) that introduce many cross-site scripting security issues.

CORS defines a way in which a browser and server can interact to safely determine whether or not to allow the cross-origin request.^[2] It allows for more freedom and functionality than purely same-origin requests, but is more secure than simply allowing all cross-origin requests. It is a recommended standard of theW3C.^[3]

原文解釋來自維基百科

個人翻譯：

　　跨域資源共享是一個容許網頁上受限制的資源（如字體，JavaScript等）向本域名同源資源外的其餘域名請求的機制。

　　一個網頁也許能隨意地嵌入任何一個域名中的圖片、樣式、腳步、框架、視頻和一些插件（例如Adobe Flash）等內容。可是嵌入的網絡字體和AJAX請求在傳統上被限制於只能在主頁的同一域名下訪問（按照同源安全政策）。跨域的AJAX請求默認是被禁止的，由於它們能連同指定的自定義HTTP請求頭，一塊兒執行會帶來不少跨域腳步安全問題的高級請求（如POST,PUT,DELETE和其餘類型的HTTP請求）。

　　CORS規定了一種方法，經過這種方法瀏覽器和服務器之間可以安全地決定是否容許跨域請求。它比單純的同源請求給予了更大的自由度以及功用性，但不是簡單的容許全部跨域請求會更安全一些。這是W3C的一個推薦標準。

 實現：

　　訪問方法：在服務端使用'Access-Control-Allow-Origin' header進行配置。

　　如下客戶端以AJAX爲例，服務端以PHP爲例.

　　本機域名1：http://www.chengguanhui.com，本機域名2：http://www.goingic.com，請求域名是：http://www.happywzq.com。

 1 var main = document.getElementById("main");
 2         var btn = document.getElementById("btn");
 3         var ajax = new XMLHttpRequest();
 4         btn.onclick = function(){    
 5             ajax.onreadystatechange=function()
 6                   {
 7                   if (ajax.readyState==4 && ajax.status==200){
 8                        main.innerHTML=ajax.responseText;
 9                 }
10             }
11         ajax.open("POST","http://www.happywzq.com/xiaohui/index.php",true);
12         ajax.send();
13         }

1 <?php 
2     //header("Access-Control-Allow-Origin:*");
3     header("Content-type:text/html;charset=utf-8");
4     echo "我在測試CORS!";
5  ?>

　　情景一：不加Access-Control-Allow-Origin文件頭。

圖一爲跨域訪問，圖二爲本域訪問。結果很明顯，不設置容許訪問源時，其餘域名是沒法請求的，在當前域名下的文件成功訪問。

---

 

　　情景二：將PHP註釋去掉，添加Access-Control-Allow-Origin：*文件頭，開聽任意域名（不建議使用這種方式）。

結果是，我這邊的兩個主機的域名都能向happywzq下的文件發起請求，併成功返回文本。

---

 

　　情景三：將PHP容許源文件頭改成'Access-Control-Allow-Origin：http://www.chengguanhui.com'，即只對個人域名容許請求。

結果很明顯，用個人域名1時能夠訪問，但用域名2時就請求不了，沒法返回數據了。

兼容性：

　　在兼容性方面，CORS在IE9+，FF3.5+，Safari4.0+等瀏覽器上表現良好。如下這張圖是從別的地方拿過來的（若有侵權本人當即刪除並公開致歉），可是我測試了一下IE6跟IE8，結果均沒有任何反應，且沒報錯。至於IE8，網上有人說能夠實現CORS，可是寫法不同。這個暫時沒有研究過，多是所謂的部分支持，又或許須要寫兼容吧。好了，時間關係，先回家吃飯了，明天再測試IE8的狀況吧。

圖爲各瀏覽器對於CORS的支持狀況，圖片來源：蔣宇捷，數據來源：http://caniuse.com/cors。

 

說明：轉載時請註明做者與出處，謝謝。