基於angular-cli配置代理解決跨域請求問題

轉自:liyouzhi666

感謝原博主貢獻

1.跨域請求產生

隨着不一樣終端(Pad/Mobile/PC)的興起，對開發人員的要求愈來愈高，純瀏覽器端的響應式已經不能知足用戶體驗的高要求，咱們每每須要針對不一樣的終端開發定製的版本。爲了提高開發效率，先後端分離的需求愈來愈被重視，後端負責業務/數據接口，前端負責展示/交互邏輯，同一份數據接口，咱們能夠定製開發多個版本。 而先後端分離帶來的一個問題就是前端web部署的服務器和後端提供服務的服務器大機率不在同一個域名下，進而會產生跨域問題。

2.通用解決方案:cors

若是瀏覽器支持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。

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

因爲以POST、PUT方式傳送JSON格式的數據在REST中很常見，因此要跨域正確處理POST和PUT請求，服務器端必須正確響應OPTIONS請求。（摘抄自廖雪峯老師的文章）

須要深刻了解CORS的童鞋請移步W3C文檔。

3.angular-cli代理配置解決跨域請求問題

使用CORS的確是能夠很好的解決跨域問題，可是須要後端開發人員配合，若是想在不修改後端代碼的前提下解決問題，配置代理絕對是不二選擇。
使用tomcat、nginx…配置代理固然能夠，可是麻煩，須要先打包代碼再部署到nginx（或者其餘）中，才能測試使用，爲了保證開發效率，咱們但願代碼可以即寫即測，這時在angular-cli中配置代理的優點就先露無疑。
在angular的開發中，angular-cli很是的方便，強烈推薦使用，今天咱們主要講述一下angular-cli如何經過配置代理解決跨域請求問題。

須要瞭解angular-cli的童鞋請移步angular-cli 官方文檔

假如你如今已經使用angular-cli構建你的項目，而且程序正常運行，那麼咱們如今開始配置cli的代理：

1.首先咱們建立代理配置文件proxy.conf.json

假如你的後端服務的訪問地址爲「10.4.60.200:8080」,如下爲proxy.conf.json的例子：

{
"/api": {

"target": "http://10.4.60.200:8080",
"secure": false

}
}

2.改寫package.json

修改啓動命令，默認使用npm start時使用代理文件配置的代理,"start": "ng serve --proxy-config proxy.conf.json".此時此刻當你再使用npm strat啓動angular項目時，代理已經配置好了，咱們仍是以上面的服務url爲例，若是原先你須要http://10.4.60.200:8080/api/server獲取服務，那麼如今你只須要把代碼中的「10.4.60.200:8080」改成「localhost:4200」便可（cli默認端口爲4200，根據本身的啓動端口編寫）。 此時你的全部服務請求在瀏覽器看來都是同域請求，再也不存在跨域問題，上面所講只是一個簡單的例子，代理有不少參數能夠選擇配置，例如在代理時對cookie重寫能夠寫爲」cookieDomainRewrite」:」localhost」。

更多更詳細的代理配置能夠參考webpack-dev-server proxy settings