码迷,mamicode.com
首页 > 其他好文 > 详细

vue-cli项目本地代理实现跨域请求

时间:2018-04-21 15:23:36      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:利用   去掉   重启   http   font   rewrite   role   创建   row   

  使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole。不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置,不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,通过修改vue proxyTable接口实现跨域请求,在vue-cli项目中的config文件夹下的index.js配置文件中,修改前的dev:
dev: {  
    env: require(./dev.env),  
    port: 8080,  
    autoOpenBrowser: true,  
    assetsSubDirectory: static,  
    assetsPublicPath: /,  
    proxyTable: {}, 
    cssSourceMap: false  
  }

  只要修改里面的proxyTable: {}项

proxyTable: {  
    /api: {  //代理地址  
        target: http://10.1.0.34:8000/,  //需要代理的地址  
        changeOrigin: true,  //是否跨域  
        secure: false,    
        pathRewrite: {  
            ^/api: ‘‘   //本身的接口地址没有 ‘/api‘ 这种通用前缀,所以要rewrite,如果本身有则去掉  
        }
    }
}

  然后重启项目npm run dev

  请求数据时URL前加上“/api”就可以跨域请求了

self.$axios.get(/api/queryRole, {params: params})  
    .then((res) => {  
        console.log(res);  
    }).catch((err) => {  
        console.log(err);  
    })

 

vue-cli项目本地代理实现跨域请求

标签:利用   去掉   重启   http   font   rewrite   role   创建   row   

原文地址:https://www.cnblogs.com/goloving/p/8901189.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!