vue2 Axios解決跨域訪問

這裡以訪問 ve2x 的乙個公告api為例，直接訪問如下：

this.$axios.get("")

.then(res=>)
.catch(err=>)

首先在main.js中，配置下我們訪問的url字首：

import vue from 'vue'

import axios from 'axios'
vue.prototype.$axios = axios
axios.defaults.baseurl = '/api'
vue.config.productiontip = false
/* eslint-disable no-new */
new vue()

axios.defaults.baseurl = 『/api』

修改config資料夾下的index.js檔案，在proxytable中加上如下**：

'/api':

}

this.$axios.get("/site/info.json")

.then(res=>)
.catch(err=>)

原理：因為我們給url加上了字首 /api，我們訪問 http://localhost:8080/api/site/info.json 就當於訪問了：http://localhost:8080/api/site/info.json。(假設本地訪問埠號為 8080）

又因為在 index.js 中的 proxytable 中攔截了 /api ,並把 /api 及其前面的所有替換成了 target 中的內容，因此實際訪問 url 是

。

Vue用axios跨域訪問資料

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

Vue用axios跨域訪問資料

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

axios跨域訪問配置

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