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