# Angular建立proxy.conf.json代理請求轉發到後端服務
## 有關 proxy.conf.json
通常用於處理 cross 跨域問題，當前端在做api串接若要訪問到不同網址的後端Server時，可以建立「proxy.conf.json」做代理，將前端的Request轉到後端的Server。

## 設定方式
### STEP1. 建立 proxy.conf.json 代理伺服器設定檔
在專案根目錄或指定目錄下建立proxy.conf.json檔(範例以./src/下為主，如下樹狀圖所示)

.
├── README.md
├── angular.json
├── json-server
│   ├── _db.js
│   └── hero
├── package-lock.json
├── package.json
├── src
│   ├── app
│   ├── assets
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── proxy.conf.json  #代理用的json設定檔
│   └── styles.css
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

### STEP2. 新增需代理的網址和相關properties

# proxy.config.json

{
  "/fakeApi": {
    "target": "http://10.10.56.171:3000",
    "secure": false, 
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {
      "^/fakeApi": ""
    }
  }
}

:::info
**內容說明:**
**'/fakeApi'**：只有呼叫的api開頭是這個內容才會進行代理。
**target**：目標網址。
**secure**：是否使用https。如果目標網址是https則要設定成true。
**changeOrigin**：是否更改Requert Header中的Host。若為true則會將Request Header的Host從「localhost」 改成target的 「10.10.56.171」，進而解決cross問題。
**logLevel**：提供"debug"、"info"、"warn"、"error"四種Log等級，會依據級別在Server的Terminal中顯示不同程度的訊息內容。
**pathRewrite**：重寫路徑，將"/fakeApi/AAA"重寫成"AAA"。
:::
### STEP3. 在 angular.json 中的 architect.serve 底下新增options.proxyConfig 項目

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

#### STEP4. 重啟Angular Server

$ ng serve

> 成功代理