美文网首页
webpack搭建的vue项目如何利用axios代理跨域

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

作者: AizawaSayo | 来源:发表于2019-05-13 00:55 被阅读0次

    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)
                })
    

    相关文章

      网友评论

          本文标题:webpack搭建的vue项目如何利用axios代理跨域

          本文链接:https://www.haomeiwen.com/subject/cwlkaqtx.html