前言
由於Vue.Js官方已不在維護vue-resource,而另推薦使用axios。因此就以axios為例,搭配http-proxy-middleware,做到
- 跨域存取
- 前後端分離的開發,最終部署仍是同一台server的話,也可以讓API網址直接寫成部署後的內部使用樣子,避免部署時需要再修改的網址的雜事
而VUE-CLI產生的專案本身已有先將proxytable寫好了!因此裝好套件設定好後,就可以直接使用了!
安裝axios及http-proxy-middleware
1 | npm i axios --save-dev |
載入axios
打開src/main.js
,輸入
1 | import axios from 'axios'; |
設定http-proxy-middleware
打開config/index.js
,搜尋proxyTable
,會看到官方已經預置在裡面,將設定填進至{}
裡面
1 | proxyTable: { |
在app.vue
檔新增一個methods測試 (記得template要加個button關聯)
1 | methods: { |
打開chrome的console,會看到順利取得資料
其實他的作業方式也很容易理解
當遇到/api
時,在前面加上http://127.0.0.1:8000/api/
,但路徑就變成了http://127.0.0.1:8000/api/api
了!網址就錯了!
所以接著在pathRewrite
裡把原本的關鍵字/api
拿掉,這樣在get時得到的網址,就會是http://127.0.0.1:8000/api/user/
了!
注意!每次修改proxyTable後,都需要重新啟動服務!!他沒有hot-reload!
即按ctrl+c後在npm run dev
分享一個踩過的坑
若proxyTable路徑很相似的話,他會直接以先取到的為主,然後網址就會解析錯誤啦!
比如以下例子:
1 | proxyTable: { |
會發現得到的網址是http://127.0.0.1:8000/api/-auth/
這個坑最大的問題是在console看到的post網址是正確的,沒注意的話還真的滿不容易發現的…
解決方法很簡單,把每個的後面都加/
,讓他完整取代
即
1 | proxyTable: { |
在Vue.Js寫axios時記得每個網址結尾都要寫好/
,如/api/user/
,不要偷懶只寫個/api/user
,就不太會出現這種錯誤了!