webpack搭建的vue项目如何利用axios代理跨域

2019-05-13  本文已影响0人  AizawaSayo

1.找到config文件夹下的index.js,找到proxyTable: {},在里面填入

    proxyTable: {//axios跨域处理
        "/api":{    
            target: ' http://v.juhe.cn',//要跨域访问的域名或ip+端口号地址
            //secure: false,    //如果是https接口,需要配置这个参数
            changeOrigin: true,
            pathRewrite:{
                '^/api':''
            }
        }
    }

2.接下来在src文件夹下的入口文件main.js里配置

Vue.config.productionTip = false
//配置公共URL
//Axios.defaults.baseURL='http://v.juhe.cn'
Axios.defaults.baseURL='/api'

//配置axios
Vue.prototype.$axios=Axios;

3.最后去请求访问接口的地方和我们通常做的那样加上接口名即可,注意:接口名必须要写相对路径,如 /xxx?id=1

this.$axios.get('/toutiao/index?type=top')
           .then(res=>{               
               console.log(res);                
            })
            .catch(err=>{
                console.log('轮播图数据异常',err)
            })
上一篇下一篇

猜你喜欢

热点阅读