(八) Angular 8 開發必備清單--proxy配置文件代理

代理到後端服務器
你可以使用 webpack 開發服務器中的代理支持來把特定的 URL 轉發給後端服務器，只要傳入 --proxy-config 選項就可以了。比如，要把所有到 http://localhost:4200/api 的調用都轉給運行在 http://localhost:3000/api 上的服務器，可採取如下步驟。

在項目的 src/ 目錄下創建一個 proxy.conf.json 文件，和 package.json 放在同一目錄下。

往這個新的代理配置文件中添加如下內容：

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

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

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

要使用這個代理選項啓動開發服務器，請運行 ng serve 命令。

你可以編輯這個代理配置文件，以添加配置項，例子如下。要查看所有選項的詳細說明，參見 webpack DevServer 文檔。

注意，如果你編輯了這個代理配置文件，就必須重啓 ng serve，來讓你的修改生效。

重寫 URL 路徑
pathRewrite 代理配置項能讓你在運行時重寫 URL 路徑。比如，你可以在代理配置中指定如下的 pathRewrite 值，以移除路徑末尾的 “api” 部分。

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

如果你要訪問的後端不在 localhost 上，還要設置 changeOrigin 選項。比如：

{
  "/api": {
    "target": "http://npmjs.org",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true
  }
}

要想了解你的代理是否在如預期般工作，可以設置 logLevel 選項。比如：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "logLevel": "debug"
  }
}

代理的有效日誌級別是 info（默認值）、debug、warn、error 和 silent。

代理多個條目
通過用 JavaScript 定義此配置，你還可以把多個條目代理到同一個目標。

將代理配置文件設置爲 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;
在 CLI 配置文件 angular.json 中，指向 JavaScript 配置文件：

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