angular4跨域請求問題

 作項目遇到跨域問題網上查了不少都是複製黏貼其中有些沒明白的地方，後來本身琢磨出問題所在，作了一些修改，但願能幫到剛入坑不久的朋友

1. 跨域

跨域:

瀏覽器對於javascript的同源策略的限制,例如a.cn下面的js不能調用b.cn中的js,對象或數據(由於a.cn和b.cn是不一樣域),因此跨域就出現了.

上面提到的,同域的概念又是什麼呢??? 簡單的解釋就是相同域名,端口相同,協議相同

同源策略:

請求的url地址,必須與瀏覽器上的url地址處於同域上,也就是域名,端口,協議相同.

好比:我在本地上的域名是study.cn,請求另一個域名一段數據

這個時候在瀏覽器上會報錯:

這個就是同源策略的保護,若是瀏覽器對javascript沒有同源策略的保護,那麼一些重要的機密網站將會很危險~

1. 反向代理

反向代理（Reverse Proxy）方式是指以代理服務器來接受internet上的鏈接請求，而後將請求轉發給內部網絡上的服務器，並將從服務器上獲得的結果返回給internet上請求鏈接的客戶端，此時代理服務器對外就表現爲一個反向代理服務器。

1. Angular4跨域

Angular4項目分爲工程代碼和生產代碼,在本地調試通常都是工程代碼,這樣聯調接口的話,每次寫一個接口都要丟到服務器上測試,嚴重影響效率,因此咱們須要作的就是能在工程項目上聯調接口,隨時能看到效果,可是後端代碼不是部署在本機的話就會有跨域問題,因而咱們便須要去着重去解決跨域問題!這樣後端代碼隨時改,前端也能夠隨時更改看到效果,實現真正的先後端分離!

對於Angular4解決跨域問題,應該是開發者已經想到這個問題,因此解決這個問題很簡單!那就是反向代理!!

下面介紹反向代理的方法:

1. 首先須要創建一個JSON文件,文件名」proxy.config.json」

 

{

  "/api":{

    "target":"http://192.168.12.203:8080"

  }

}

this.$http.post(`/api/front/frontUserController/login.do`,data)

     .then(res=>{

             Console.log(res);

})

 

 

2.這裏"/api"不是固定的，好比你請求地址http://192.168.12.203:8080/icpms/regd/getRegBrand.do接口,把上面的內容改爲下面

{

  "/icpms":{

    "target":"http://192.168.12.203:8080"

  }

}

而後把post裏面的地址改爲

this.$http.post(`/icpms/regd/getRegBrand.do`,data)

     .then(res=>{

             Console.log(res);

})

 

由於http://192.168.12.203:8080已經被代理到/api上，也就是/icpms!

3.而後配置」package.json」文件

 

"scripts": {

  "ng": "ng",

  "start": "ng serve  --proxy-config proxy.config.json",

  "build": "ng build  --prod --aot",

  "test": "ng test",

  "lint": "ng lint",

  "e2e": "ng e2e"

}