Angular開發必不可少的代理配置

此處說的代理是 ng serve 提供的代理服務。

在開發環境中，Angular應用與後端服務聯調測試時，Chrome瀏覽器會對發請求進行跨域檢測。通過代理服務，來解決開發模式下的跨域問題。

接下來我們通過代理服務實現請求 http://localhost:4200/api  時代理到後端服務http://localhost:8080/api

基本代理

首先我們需要在項目更目錄下創建一個名爲 proxy.conf.json 的代理配置文件，內容如下：

{  "/api": {    "target": "http://localhost:8080",    "secure": false  }}

我們通過 --proxy-config 參數來加載代理配置文件：

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

我們還可以在 angular.json 中通過proxyConfig 屬性來設置代理：

"architect": {  "serve": {    "builder": "@angular-devkit/build-angular:dev-server",    "options": {      "browserTarget": "your-application-name:build",      "proxyConfig": "proxy.conf.json"    },

angular.json 是Angular CLI的配置文件

路徑重寫

在基本代理中，我們配置了http://localhost:4200/api 代理後端服務 http://localhost:8080/api。而在實際開發中，我們的後端服務可能沒有提供 /api 前綴，實際的後端服務可能是這樣的：

http://localhost:8080/usershttp://localhost:8080/orders

在這種情況下，上面配置的基本代理就無法滿足我們的需求了，因此後端不存在 http://localhost:8080/api/users 服務。幸運的是， Angular CLI 代理提供了路徑重寫功能。

{  "/api": {    "target": "http://localhost:8080",    "secure": false,    "pathRewrite": {      "^/api": ""    }  }}

此時我們在瀏覽器訪問 http://localhost:4200/api/users , 代理服務會給我們代理到後端服務 http://localhost:8080/users 上。

路徑重寫功能可以讓我們很好的區分前端路由和後端服務。可以一目瞭然的知道http://localhost:4200/api/users訪問的是一個後端服務。

非本地域

隨着互聯技術的發展，前後端分工越來越明確。前後端的交互就是REST接口。在這樣的實際環境中，我們的前端工程師的本地不會運行後端服務，而是使用後端工程師提供的服務，此時，我們的後端服務的域就不會是 localhost , 而可能是 http://test.domain.com/users 。

此時我們就需要用的代理的另一個參數 changeOrigin 來滿足我們的需求：

{  "/api": {    "target": "http://test.domain.com",    "secure": false,    "pathRewrite": {      "^/api": ""    },    "changeOrigin": true  }}

這樣，我們訪問 http://localhost:4200/api/users 就會被代理到http://test.domain.com/users 。

代理日誌

在使用前端代理的過程中，如果想要調試代理是否正常工作，還可以添加 logLevel 選項：

{  "/api": {    "target": "http://test.domain.com",    "secure": false,    "pathRewrite": {      "^/api": ""    },    "logLevel": "debug"  }}

logLevel 支持的級別選項有 debug , info , warn ,silent ，默認是 info 級別.

多代理入口

如果前端需要配置多個入口代理到同一個後端服務，不想使用前面的路徑重寫方式，我們可以創建一個 proxy.conf.js 文件來替代我們上面的 proxy.conf.json ：

const PROXY_CONFIG = [    {        context: [            "/my",            "/many",            "/endpoints",            "/i",            "/need",            "/to",            "/proxy"        ],        target: "http://localhost:3000",        secure: false    }]
module.exports = PROXY_CONFIG;

修改我們的 angular.json 中的 proxyConfig 爲 proxy.conf.js ：

"architect": {  "serve": {    "builder": "@angular-devkit/build-angular:dev-server",    "options": {      "browserTarget": "your-application-name:build",      "proxyConfig": "proxy.conf.js"    },