淺析Angular中怎麼用Api 代理

作為前端開發，我們跟後端對接介面是很頻繁的事情，但是，我們對接的過程中總是遇到跨域的問題，那麼我們要如何解決呢？

本文使用angualr來講解代理api對接的話題。 【相關教學推薦：《angular教學》】

首先我們先來了解下，什麼跨域。

跨域

簡單理解：當一個要求的协议、域名（ip地址）、端口三部分任意一个目前頁面的url不同就是跨域。

以我的網站https://jimmyarea.com為例:

代理

這個時候，我們可以透過代理，本地聯調不同環境的api位址。

首先，我們在專案的根目錄上新建一個檔案proxy.conf.json 。

我們以介面請求https://jimmyarea.com/api/public/article?page=-1為範例：

{
  "/api": {
    "target": "https://jimmyarea.com/",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {
      "^/api": "/api"
    }
  }
}

target是代理的位址， pathRewrite是對代理的前綴的重寫。

完成了代理文件之後，需要開啟代理。我們在package.json中新增多一條命令列，表示是開發環境偵錯使用。

"script": {
  "dev": "ng serve --proxy-config=proxy.conf.json",
}

執行npm run dev啟動專案並帶上代理程式。每次代理檔案更改，需要重新啟動下該命令列～

驗證

我們新建一個article的服務，其中article.service.ts檔案內容如下：

import { Injectable } from '@angular/core';
// http 用戶端import { HttpClient } 從 '@angular/common/http'

@Injectable({
  providedIn: 'root'
})

export class ArticleService {

  constructor(
    private http: HttpClient
  ) { }
   
  // 取得文章列表getArticleList() {
    return this.http.get('/api/public/article', {
      // 回傳類型responseType: 'json',
      // 請求的參數params: {
        page: -1
      }
    })
  }

}

上面的請求，在頁面上網址是http://localhost:4200/api/public/article?page=-1 ，其實造訪的是網址https://jimmyarea.com/api/public/article?page=-1 。我們可以在user-list.component.ts中呼叫驗證一下：

ngOnInit():void {
  this.articleService.getArticleList().subscribe({
    next: (data: any) => {
      console.log(data)
    },
    error: () => {}
  })
  // ...
}

程式跑起來後，你可以在控制台上看到下面的網路請求：

Good Job, Bro.我們能夠完美代理後端所給的地址，進行調試了，並且代理可不止代理一個地址哦。讀者可以寫多個代理地址驗證一下～

【完】