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

發表於 分類於 ， Disqus：
在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

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

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

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

參考資料

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