Vue用axios跨域訪問資料

2022-04-02 00:52:06 字數 1074 閱讀 9822

vue用axios跨域訪問資料

axios是vue-resource的替代品,vue-resource不再維護。

安裝axios:npm install axios

使用vue-cli開發時,由於專案本身啟動本地服務是需要占用乙個埠的,所以會產生跨域的問題。在使用webpack做構建工具的專案中,使用proxytable**實現跨域是一種比較方便的選擇。

proxytable相關配置及使用說明:

在config/index.js檔案中,找到dev物件下proxytable物件進行跨域設定,配置如下:

dev: }},

--------------------main.js

/*ajax請求

*/import axios from 'axios'axios.defaults.baseurl = '/api'//

改成/api才能用proxytable跨域

vue.prototype.$ajax = axios

dev: }//

http://localhost:8080/v2表示

預設情況下,不接受執行在 https 上,且使用了無效證書的後端伺服器。如果你想要接受,修改配置如下:

proxy:

}

axios傳參

1:vue官方推薦元件axios預設就是提交 json 字串,所以我們要以json字串直接拼接在url後面的形式,直接將json物件傳進去就行了

let postdata =

axios.get('/api/login/dologin',

}).then(function (response) )

.catch(function (error) );

這裡我們將postdata這個json物件傳入到post方法中

2:以key:val的形式傳參

(1).安裝qs:npm install qs

(2).對這個json物件操作

let postdata = qs.stringify()

(3).再匯入

import qs from 'qs'

Vue用axios跨域訪問資料

axios是vue resource的替代品,vue resource不再維護。安裝axios npm install axios 使用vue cli開發時,由於專案本身啟動本地服務是需要占用乙個埠的,所以會產生跨域的問題。在使用webpack做構建工具的專案中,使用proxytable 實現跨域是...

vue2 Axios解決跨域訪問

這裡以訪問 ve2x 的乙個公告api為例,直接訪問如下 this.axios.get then res catch err 直接訪問瀏覽器會報跨域問題 首先在main.js中,配置下我們訪問的url字首 import vue from vue import axios from axios vue...

axios跨域訪問配置

跨域訪問技術 cors cross origin resource sharing 同源策略 same origin policy 在乙個瀏覽器中訪問的 不能訪問另乙個 中的資料,除非這兩個 具有相同的origin,也即是擁有相同的協議 主機位址以及埠。一旦這三項資料中有一項不同,那麼該資源就將被認...