AJAX POST&跨域 解決方案 - CORS

 

跨域是我在平常面試中常常會問到的問題，這詞在前端界出現的頻率不低，主要緣由仍是因爲安全限制(同源策略， 即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等)一塊兒使用，實現強大的新體驗功能。

 

總結的不錯，就拿過來了。

轉載自： http://www.cnblogs.com/Darren_code/p/cors.html