Angular增加proxy設定,自動將連結轉向後端

前言

在Angular專案中
開發時期常常會需要Call到本機另一個port的Server或開發環境的api
但上線時,又會將整個專案與Server打包在一起

將後端api與整個域名寫死在專案之中絕對不是個好方法

除了最直覺直接想到的寫在environment之外,也可以使用Angular本身提供的proxy來做到
透過proxy,也可以精簡專案裡的api網址,看著也更加舒適!

作法

  1. 在專案根目錄下,增加proxy.conf.json
    {
      "/api/": {
        "target": "http://127.0.0.1:3000", // 依自己的後端調整ip: port
        "secure": false,
        "logLevel": "debug",
      }
    }
  2. 打開Angular.json,在serve.options底下,增加一行
    "proxyConfig": "proxy.conf.json"

就會自動代理轉發了!

補充說明proxy.conf.json

除了上面的參數之外
還有changeOriginpathRewrite參數可以做到更深度的客制化,解決複雜的跨域需求

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

在大部份情境下,通常只需要targetsecure(即作法裡的寫法)就行了
也滿建議將logLevel打開,確定自己的api轉發是正確的
避免無謂的抓錯時間

參考資料

stack overflow/angular-cli server - how to proxy API requests to another server?