Vue專案中關於axios跨域的設定
阿新 • • 發佈:2019-01-01
在config
資料夾中的index.js
檔案我們要將proxtTable
選項設定。引數如下
proxyTable: {
'/api': {
target: 'http://192.168.1.xxx:80', // 資料介面
changeOrigin: true, // 跨域
secure: false,
pathRewrite: {
'^/api': ''
}
}
},
target
項即是我們要將請求傳送的靶向目標。而此選項則可以理解為我們的node
後臺為我們作了一次正向代理,以此避免了跨域
同時我們再發送請求的時候還需要注意一點
this.$axios.post('/api/xxxx)
.then(res=>{
....
})
.catch(err=>{
....
})
注意!務必要加上/api
字首!沒有它我們沒辦法完成上述的代理
當然,我的axios
選項寫成這個樣子是因為我在main.js
中引入axios
的同時還加了$axios
方法。所以才可以這樣寫。這個各人跟各人不一樣,大家批判性吸收
import Axios from 'axios'
Vue.prototype.$axios = Axios