跨域是我在日常面試中經常會問到的問題，這詞在前端界出現的頻率不低，主要原因還是由於安全限制(同源策略， 即JavaScript或Cookie只能訪問同域下的內容)，因為我們在日常的專案開發時會不可避免的需要進行跨域操作，所以跨域能力也算是前端工程師的基本功之一。 　　和大多數跨域的解決方案一樣，JSONP也是我的選擇，可是某天PM的需求變了，某功能需要改成支援POST，因為傳輸的資料量比較大，GET形式搞不定。所以折騰了下聞名已久的CORS（跨域資源共享，Cross-Origin Resource Sharing），這邊文章也就是折騰期間的小記與總結。      

概述

• CORS能做什麼：

     正常使用AJAX會需要正常考慮跨域問題，所以偉大的程式設計師們又折騰出了一系列跨域問題的解決方案，如JSONP、flash、ifame、xhr2等等。      本文介紹的CORS就是一套AJAX跨域問題的解決方案。

•  CORS的原理：

     CORS定義一種跨域訪問的機制，可以讓AJAX實現跨域訪問。CORS 允許一個域上的網路應用向另一個域提交跨域 AJAX 請求。實現此功能非常簡單，只需由伺服器傳送一個響應標頭即可。

• CORS瀏覽器支援情況如下圖：

              　　喜聞樂見、普大喜奔的支援情況，尤其是在移動終端上，除了opera Mini； 　　PC上的現代瀏覽器都能友好的支援，除了IE9-，不過前端工程師對這種情況早應該習慣了...      

CORS啟航

　　假設我們頁面或者應用已在 http://www.test1.com 上了，而我們打算從 http://www.test2.com 請求提取資料。一般情況下，如果我們直接使用 AJAX 來請求將會失敗，瀏覽器也會返回“源不匹配”的錯誤，"跨域"也就以此由來。 　　利用 CORS，http://www.test2.com 只需新增一個標頭，就可以允許來自 http://www.test1.com 的請求，下圖是我在PHP中的 hander() 設定，“*”號表示允許任何域向我們的服務端提交請求：       也可以設定指定的域名，如域名 http://www.test2.com ，那麼就允許來自這個域名的請求：       　　當前我設定的header為“*”，任意一個請求過來之後服務端我們都可以進行處理&響應，那麼在除錯工具中可以看到其頭資訊設定，其中見紅框中有一項資訊是“Access-Control-Allow-Origin：* ”，表示我們已經啟用CORS，如下圖。 　　PS：由於demo都在我廠的兩臺測試機間完成，外網也不能訪問，所以在這就不提供demo了，見諒       　　簡單的一個header設定，一個支援跨域&POST請求的server就完成了:) 　　當然，如果沒有開啟CORS必定失敗的啦，如下圖： 　　

問題&小結

• 剛剛說到的相容性。CORS是W3C中一項較新的方案，所以部分瀏覽器還沒有對其進行支援或者完美支援，詳情可移至 http://www.w3.org/TR/cors/
• 安全問題。CORS提供了一種跨域請求方案，但沒有為安全訪問提供足夠的保障機制，如果你需要資訊的絕對安全，不要依賴CORS當中的權限制度，應當使用更多其它的措施來保障，比如OAuth2。

　　自認為的cors使用場景：

• cors在移動終端支援的不錯，可以考慮在移動端全面嘗試；PC上有不相容和沒有完美支援，所以小心踩坑。當然瀏覽器相容就是個偽命題，說不準某個瀏覽器的某個版本就完美相容了，說不準就有點小坑，尼瑪傷不起！～
• jsonp是get形式，承載的資訊量有限，所以資訊量較大時CORS是不二選擇；
• 配合新的JSAPI(fileapi、xhr2等)一起使用，實現強大的新體驗功能。

參考資料: