vue-cli3.0 axios跨域请求代理配置及端口修改

1.安装 axios
2. 在全局中main.js 中引入

 import axios from 'axios' 
 Vue.prototype.$axios = axios

3.项目根目录下新建 vue.config.js

//如果你用vue-cli初始化一个项目,一般proxyTable中是空的

proxyTable:{}

//在里面填入:

 proxyTable:{
    '/api': {
     target: 'http://testapi.tvm.com.cn',     //设置你调用的接口域名和端口号 别忘了加http
     changeOrigin: true,
     pathRewrite: {
     '^/api': '',     //这里理解成用'/api'代替target里面的地址，后面组件中我们掉接口时直接用api          代替 比如我要调用'http://xxx.xxx.xxx.xx:8081/user/add'，直接写‘/api/user/add’即可
       }
      }

上面pathRewrite中的注释不清楚,我再写一遍:

用’/api’来代替target中的地址,以后再调用接口,比如http://testapi.tvm.com.cn/some/getsome

那么就直接写 ‘/api/some/getsome’

设置好之后,我们到一个组件中使用,上面已经引入了axios

 let url='/api/some/getsome'
 this.$axios.get(url).then(res=>{
         console.log(res)
    })
     .catch(err=>{
         console.log(err)
    })

4. 重启服务npm run dev