Angular CLI 端口轉發規則

Angular CLI 端口轉發規則

Angular 版本:11

設置代理配置文件

1. 在npm腳本命令中,手動指定代理文件

   "scripts":{
     "start":"ng server --proxy-config proxy.conf.json -open"
   }
   

2. 在 CLI 配置文件 angular.json 中爲 serve 目標添加 proxyConfig 選項：

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

配置例子

• target 代理目標地址
• secure 代理目標地址如果是 https 應該設置爲 true，反之爲 false
• pathRewrite 重寫地址，例如 pathRewrite: {'^/api': '/'} 將前綴 /api 轉爲 /
• changeOrigin 將主機標頭的 host 更改爲目標URL，有些後端會根據其值來判斷是否有效，可能需要通過設置 true
• logLevel 設置爲 debug 可以終端顯示代理轉發的消息

1. 全局代理

   {
     "*": {
       "target": "http://example.com",
       "changeOrigin": true
     }
   }
   

   直接*全局代理

2. 指定路徑進行代理

   {
     "/api": {
       "target": "http://example.com",
       "changeOrigin": true
     }
   }
   

   注意必須以/開始。

   代理指定某請求路徑下所有的請求

   {
     "/api/*": {
       "target": "http://example.com",
       "changeOrigin": true
     }
   }
   

3. 重寫請求路徑

   {
     "/api": {
       "target": "http://example.com",
       "pathRewrite": {
         "^/api": ""
       }
     }
   }
   

   代理配置中指定如下的 pathRewrite 值，以移除路徑末尾的 "api" 部分。也可以進行替換操作。

4. 一個代理設置，同時適配代理多個路徑

   需要自行新建一個js文件，返回一個模塊參數進行設置。加載配置方式，同proxy.conf.json

   const PROXY_CONFIG = [
       {
           context: [
               "/api1",
               "/api2",
               "/api3",
           ],
           target: "http://example.com",
           secure: false
       }
   ]
   
   module.exports = PROXY_CONFIG;
   

更多配置說明

Angular - 代理設置