iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
Modern Web

30天Vue出Google SSO系列 第 16

Day 16. F2E-Axios呼叫API

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20200904/20118686j4WLnYekrm.jpg

後端第一支API完成後要回到前端囉~
進度目標是實作登入對後端進行驗證!!

開發一個系統,最困難的就是前後端的交流,前端連不到後端的情況時常發生,而且都不好處理
我敢說 今天呼叫API的方法學會之後,等級絕對暴衝,別人還在農兵等上6你已經可以吃巴龍了


#Axios環境建置

一開始先做環境建置~ 前面很多類似的流程應該都見怪不怪了吧~

首先安裝Axios套件
記得是前端的專案喔!! 不要裝錯裝到後端去了

#Step 1

輸入安裝指令:

npm install axios

#Step 2

安裝完成後,開啟 main.js 引用它:

import axios from 'axios'

全域註冊:

Vue.prototype.$http = axios

這樣就設定好囉~


#登入驗證實作

再來是今天的主題囉~

#Step 1

開啟 /components/KeyinPswd.vue ,來修改 verifyPswd() 驗證帳號密碼事件
先加一個API路徑的變數:

const api = `http://localhost:3000/api/users/signin`;

通常API路徑不會這樣寫,會放在 .env 設定檔中來引用,所以我們在根目錄下建立一個 .env 檔:

└── .env

內容放這樣:

VUE_APP_APIPATH=http://localhost:3000/api

設定檔規則:

  • 一定要 VUE_APP 開頭
  • 使用 KEY=VALUE pair方式撰寫
  • 引用變數時使用 process.env.VUE_APP_變數名稱

加好之後,剛剛的API路徑就可以改為這樣:

const api = `${process.env.VUE_APP_APIPATH}/users/signin`;

#Step 2

使用 $http 方法來對後端發送請求,請求失敗時直接把錯誤訊息回饋到畫面上xD

this.$http({
  method: "POST",
  url: api,
  data: { accountId: this.accountId, password: this.password },
})
  .then((response) => {
    //發送請求成功時
  })
  .catch((error) => {
    //發送請求失敗時
    this.setTextFieldError(false, error);
  });

#Step 3

請求成功時的內容將原本的稍作修改即可:

if (response.data.success) {
  this.$router.push({ name: "Index" });
} else {
  this.setTextFieldError(false, response.data.message);
  this.$refs.form.validate();
}

#Step 4

這樣就完成囉~ 才怪...
實際發送請求後會發現有個 很重要 的錯誤!!
https://ithelp.ithome.com.tw/upload/images/20200904/20118686Oym2PLMJit.jpg

Access to XMLHttpRequest at 'http://localhost:3000/api/users/signin' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

錯誤主要內容是 「發生了CORS跨域問題」 !!


#CORS跨域問題

會發生這個問題是因為前後端專案彼此沒有達成協定要做交流!!

那要如何解決呢~?

來~畫面切到我們的 後端 專案~
cors 套件來幫助解決這個問題

#Step 1

輸入安裝指令:

npm install cors

#Step 2

開啟 app.js 引用它:

var cors = require('cors');

接著use它並加上設定屬性:

app.use(cors({
  origin: ['http://localhost:8080'],
}))
  • origin(Array): 開放存取的網域

#Step 3

這邊我習慣會把 origin 也放到設定檔來引用,開啟 /config/index.js 加上它吧:

const cors = {
    origin: ['http://localhost:8080']
}

module.exports = {
    ...,
    cors
};

#Step 4

回到 app.js 引用設定檔,origin改為引用設定檔的 cors :

var config = require('./config');

app.use(cors({
  origin: config.cors.origin,
}));

#結果

設定完成後回到前端再測試登入看看就成功囉!!
來看看效果吧~
gif已死QQ
其實就跟假資料的時候一樣啦xD


今日重點:

  • 使用Axios來操作前段對後端的請求
  • 變數設定檔命名為 .env
    變數名稱一律使用 VUE_APP 作為開頭
    變數引用時使用process.env.VUE_APP_變數名稱
  • CORS 跨域問題解決要由後端開放存取

今天目標進度做完之後,應該有感覺到功力大增吧(?)
至少我自己當初學習的時候很有感xD
還記得第一次接API成功時我還站起來跳舞,還好隔壁同事跟我一起跳/images/emoticon/emoticon39.gif

有需要改進或是任何意見建議歡迎下面留言~


上一篇
Day 15. B2E-API連線DB
下一篇
Day 17. B2E-加入Token
系列文
30天Vue出Google SSO30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言