1. 程式人生 > >Vue專案中關於axios跨域的設定

Vue專案中關於axios跨域的設定

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