跨域是我在日常面試中經常會問到的問題，這詞在前端界出現的頻率不低，主要原因還是由于安全限制(同源政策， 即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-，不過前端工程師對這種情況早應該習慣了...
假設我們頁面或者應用已在 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提供了一種跨域請求方案，但沒有為安全通路提供足夠的保障機制，如果你需要資訊的絕對安全，不要依賴CORS當中的權限制度，應當使用更多其它的措施來保障，比如OAuth2。
自認為的cors使用場景：
cors在移動終端支援的不錯，可以考慮在移動端全面嘗試；PC上有不相容和沒有完美支援，是以小心踩坑。當然浏覽器相容就是個僞命題，說不準某個浏覽器的某個版本就完美相容了，說不準就有點小坑，尼瑪傷不起！～
jsonp是get形式，承載的資訊量有限，是以資訊量較大時CORS是不二選擇；
配合新的JSAPI(fileapi、xhr2等)一起使用，實作強大的新體驗功能。
如果覺得這文章也算用心，請勞駕點右下角的推薦。
祝2014順利。
最後，有 北京&上海 的朋友想春節後想換工作的，【百度移動雲事業部】期待聰明、勤奮的你 與我聯系 (JD在頁面右上角)
本文轉自 h2appy 51CTO部落格，原文連結：http://blog.51cto.com/h2appy/1755500，如需轉載請自行聯系原作者