前端跨越(安全限制)

一是經過Flash插件發送HTTP請求，這種方式能夠繞過瀏覽器的安全限制，但必須安裝Flash，而且跟Flash交互。不過Flash用起來麻煩，並且如今用得也愈來愈少了。

二是經過在同源域名下架設一個代理服務器來轉發，JavaScript負責把請求發送到代理服務器：

'/proxy?url=http://www.sina.com.cn'

代理服務器再把結果返回，這樣就遵照了瀏覽器的同源策略。這種方式麻煩之處在於須要服務器端額外作開發。

第三種方式稱爲JSONP，它有個限制，只能用GET請求，而且要求返回JavaScript。這種方式跨域其實是利用了瀏覽器容許跨域引用JavaScript資源：

第四種ORS

若是瀏覽器支持HTML5，那麼就能夠一勞永逸地使用新的跨域策略：CORS了。

CORS全稱Cross-Origin Resource Sharing，是HTML5規範定義的如何跨域訪問資源。

瞭解CORS前，咱們先搞明白概念：

Origin表示本域，也就是瀏覽器當前頁面的域。當JavaScript向外域（如sina.com）發起請求後，瀏覽器收到響應後，首先檢查Access-Control-Allow-Origin是否包含本域，若是是，則這次跨域請求成功，若是不是，則請求失敗，JavaScript將沒法獲取到響應的任何數據。

用一個圖來表示就是：

假設本域是my.com，外域是sina.com，只要響應頭Access-Control-Allow-Origin爲http://my.com，或者是*，本次請求就能夠成功。

可見，跨域可否成功，取決於對方服務器是否願意給你設置一個正確的Access-Control-Allow-Origin，決定權始終在對方手中。

上面這種跨域請求，稱之爲「簡單請求」。簡單請求包括GET、HEAD和POST（POST的Content-Type類型僅限application/x-www-form-urlencoded、multipart/form-data和text/plain），而且不能出現任何自定義頭（例如，X-Custom: 12345），一般能知足90%的需求。

不管你是否須要用JavaScript經過CORS跨域請求資源，你都要了解CORS的原理。最新的瀏覽器全面支持HTML5。在引用外域資源時，除了JavaScript和CSS外，都要驗證CORS。例如，當你引用了某個第三方CDN上的字體文件時：

/* CSS */
@font-face { font-family: 'FontAwesome'; src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype'); }

若是該CDN服務商未正確設置Access-Control-Allow-Origin，那麼瀏覽器沒法加載字體資源。

對於PUT、DELETE以及其餘類型如application/json的POST請求，在發送AJAX請求以前，瀏覽器會先發送一個OPTIONS請求（稱爲preflighted請求）到這個URL上，詢問目標服務器是否接受：

OPTIONS /path/to/resource HTTP/1.1
Host: bar.com
Origin: http://my.com
Access-Control-Request-Method: POST

服務器必須響應並明確指出容許的Method：

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Max-Age: 86400

瀏覽器確認服務器響應的Access-Control-Allow-Methods頭確實包含將要發送的AJAX請求的Method，纔會繼續發送AJAX，不然，拋出一個錯誤。

因爲以POST、PUT方式傳送JSON格式的數據在REST中很常見，因此要跨域正確處理POST和PUT請求，服務器端必須正確響應OPTIONS請求。