vue设置代理

1、介绍

这里的vue代理是 vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块(这个模块相当于是node.js的一个插件)。

2、实际代码

  //vue-cli3.0 里面的 vue.config.js做配置
devServer: {
    proxy: {
        '/rng': {     //这里最好有一个 /
            target: 'http://45.105.124.130:8081',  // 后台接口域名
            ws: true,        //如果要代理 websockets,配置这个参数
            secure: false,  // 如果是https接口,需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite:{
                '^/rng':''
            }
        }
    }
  }

我的 api='/rng'
我的请求地址 ${api}/xxxx/xxx ,请求地址就为 '/rng/xxxx/xxx'
当node服务器 遇到 以 '/rng' 开头的请求,就会把 target 字段加上,那么我的请求地址就为 http://45.105.124.130:8081/rng/xxxx/xxx
下面的 pathRewrite 表示的意思是 把/rng 替换为 空,那么我的请求地址就为 http://45.105.124.130:8081/xxxx/xxx(用在如果你的实际请求地址没有 rng 的情况)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载:http://www.cnblogs.com/huyong/p/6517949.html Vue相关网站参考...
    kathyb24阅读 1,107评论 0 7
  • Vue开源项目库 Vue.js开源项目速查表:https://www.ctolib.com/cheatsheets...
    cctN阅读 1,068评论 0 13
  • 文章图片上传不正常,如需文档,可联系微信:1017429387 目录 1 安装... 4 1.1 配置探针... ...
    Mrhappy_a7eb阅读 6,648评论 0 5
  • 现在的人焦虑啊,看到别人干个啥成功了,就马上要跟风。一会往东一会往西,结果忙乎了大半天,最后还是原地踏步,蹉跎了岁...
    群星咖啡馆阅读 271评论 0 0
  • 面对诱惑,现代人尤其不能克制自己的欲望,于是跌入挥霍的沼泽,还以为过的是早已注定的生活,却不知,未来的方向由从前的...
    徐朋辉阅读 579评论 0 0