【Angular】設定代理解決跨域問題

widiot1發表於2018-06-11
Angular跨域

1. 跨域

1.1 什麼是跨域

跨域，即跨站HTTP請求（Cross-site HTTP request），指發起請求的資源所在域不同於請求指向資源所在域的HTTP請求。

這是瀏覽器對JavaScript的同源策略的限制，例如a.com下面的js不能呼叫b.com中的js、物件或資料（因為a.com和b.com是不同的域）對於http://www.a.com/a.js訪問其它URL，更詳細的說明如下表所示：

URL 說明 是否允許通訊
http://www.a.com/b.js 同一域名下 允許
http://www.a.com/script/b.js 同一域名下不同資料夾 允許
http://www.a.com:8000/b.js 同一域名，不同埠 不允許
https://www.a.com/b.js 同一域名，不同協議 不允許
http://70.32.92.74/b.js 域名和域名對應ip 不允許
http://script.a.com/b.js 主域相同，子域不同 不允許
http://a.com/b.js 同一域名，不同二級域名（同上） 不允許
http://www.b.com/b.js 不同域名 不允許

同域的概念又是什麼呢?

簡單的解釋就是具有相同的域名（a.com）、埠（8080）和協議（http）。同源策略：請求的URL地址，必須與瀏覽器上的URL地址處於同域。

比如：本地上的域名是a.com，請求b.com的資料，這個時候在瀏覽器上會報錯，這個就是同源策略的保護，如果瀏覽器對JavaScript沒有同源策略的保護，那麼一些重要的機密網站將會很危險。

1.2 跨域的應用情景

當使用前後端分離，後端主導的開發方式進行前後端協作開發時，常常有如下情景：

  1. 後端開發完畢在伺服器上進行部署並給前端API文件
  2. 前端在本地進行開發並向遠端伺服器上部署的後端傳送請求

在這種開發過程中，如果前端想要一邊開發一邊測試介面，就需要使用跨域的方式。

2. Angular跨域問題

2.1 反向代理

反向代理（Reverse Proxy）方式是指以代理伺服器來接受網路上的連線請求，然後將請求轉發給內部網路上的伺服器，並將從伺服器上得到的結果返回給網路上請求連線的客戶端，此時代理伺服器對外就表現為一個反向代理伺服器。

2.2 設定方法

首先需要建立一個JSON檔案，檔名為proxy.config.json：

{
  "/":{
    "target":"http://localhost:8080/"
  }
}

http://localhost:8080/為伺服器的IP地址，或者是所需要請求的介面域名，該地址就是需要被代理的

/是代理的名稱，一般都是介面請求的IP地址後面的第一個引數名。比如http://localhost:8080/api/...，則代理名稱就是/api

因為http://localhost:8080/已經被代理到/上，所以反向代理後寫介面請求的時候只需要寫：

this.$http.post(`/user/login`,data)
     .then(res=>{
             Console.log(res);
})

然後配置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"
}

2.3 啟動代理服務

第一種：啟動專案通過npm start啟動，會自動啟動代理服務

npm start

第二種：直接以如下命令啟動代理服務

ng serve  --proxy-config proxy.conf.json

3. 參考資料

相關文章