iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 22
0

昨天我們成功存取本地檔案,今天來試著連接遠端的 API。

我們先用 PostMan 測試一下創建帳號的 API:


確定API是可以動作的。body 這邊我們要傳的是 json 格式,所以資料格式的地方我們選 raw-data,放入一個 json 物件。視窗下面會是我們的 response。
如果再傳一次 request,等於再申請一次帳號,所以就會有這樣的回傳訊息:

我們把 API 實作到 post function 上:

 // http.service.ts
 
  Register(data) {

    console.log(data);

    this.http.post('https://quiet-lake-94208.herokuapp.com/api/user/new', data)
    .subscribe((result) => {
      console.log(result);
    },
    (error) => {
      console.log(error);
    });
  }

這邊的 data 是我們傳入的 login 資訊,post 的第一個參數放入目標 URL,所以我們填入 https://quiet-lake-94208.herokuapp.com/api/user/new 第二個參數放入要傳的 data,Angular 會轉成適當的 json 格式,幫我們送出。

這次我們傳入兩個 callback function 作為參數,第一個 function 和 get() 一樣,接到結果時,將結果印出。第二個 function 是只有當錯誤發生時,才會執行,並將錯誤訊息印出。

所以我們預期的是,送出 request 後,收到正確的 result 並印出。

我們執行看看:

發現執行失敗,看一下錯誤訊息,是被 CORS 政策阻擋,也就是說,我們跟遠端伺服器在不同的網域,不能夠存取。

這個問題我在保哥的文章找到了解答。我們照著他的方法做一遍。

在專案根目錄新增 proxy.config.json

填入下面資訊:

{
 "/api": {
 "target": "https://quiet-lake-94208.herokuapp.com/",
 "secure": "false",
 "changeOrigin": true
  }
}

如保哥文章所說,當我們嘗試存取 http://localhost:4200/api 時,就會被轉發到 https://quiet-lake-94208.herokuapp.com/api

設定完 proxy.config.json 後,記得在 Angular.json 找到 "serve",加入 "proxyConfig": "proxy.config.json"

"serve": {
 "builder": "@angular-devkit/build-angular:dev-server",
 "options": {
 "browserTarget": "Sponge-Website:build",
 "proxyConfig": "proxy.config.json"
         },

這樣一來,在我們下 ng serve 時,原先要打一長串的指令來載入 proxy-config參數

ng serve --proxy-config proxy.config.json

加入 proxyConfig 之後,我們一樣下 ng serve 就行了。

如果你是下 npm start 來開啟測試伺服器的話,記得到 package.json,修改 "scripts"

然後修改 this.http.post() 的 url, 將

https://quiet-lake-94208.herokuapp.com/api/user/new

改成

/api/user/new
// http.service.ts

  Register(data) {

    console.log(data);

    this.http.post('/api/user/new', data)
    .subscribe((result) => {
      console.log(result);
    },
    (error) => {
      console.log(error);
    });
  }

再次運行:

就能成功存取遠端 API 了。


上一篇
# DAY 21 HttpClient (二)
下一篇
# DAY 23 Routing (一)
系列文
從零開始的Angular前端開發30

尚未有邦友留言

立即登入留言