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

版本: vue-cli 3.0以上

修改文件位置:根目录下的vue.config.js

代码:

devServer: {
proxy: {
'/api': {
target: 'http://192.168.123.123:8080', // 后台接口地址
ws: true, //如果要代理 websockets,配置这个参数
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite:{ // 重写路径
'^/api':''
}
}
}
}

vue项目里,我的所有接口的地址都是/api开头的,所以前面用 ‘/api’,如果我的开头是/pc开头,但是接口没有/pc这时候会用到路径重写,下面有介绍。
当node服务器 遇到 以 ‘/api’ 开头的请求,就会把 target 字段里的值加上,那么请求地址就为变成了http://192.168.123.123:8080/api/xxxx/xxx

pathRewrite 表示的意思是 把/api 替换为 空,那么请求地址就为 http://192.168.123.123:8080/xxxx/xxx(如果是/pc,就把pc替换为空)

注意2:在本地查看地址的时候,地址不会更改,还是http://localhost:8090/api/xxx/xxxxx,看起来/api和target的地址没有替换,但实际已经替换了。

刚接触的对pathRewrite不是很懂,把他的中文意思理解为重新写了/api的路径,调用时就不加/api了,这个理解是错误的,他其实就是吧/api替换为空,如果还报错就查一查看看是不是提交的方法问题,比如 get 和 post 没区分开。

Vue 配置代理的更多相关文章

  1. react和vue配置本地代理

    React 在react中配置开发环境下的本地代理相对比较简单,直接在package.json文件中修改即可. 但是这样做有其局限性,如果开发中代理多个接口的时候将无法满足需求,我们需要的是下面这种的 ...

  2. VUE前端项目配置代理解决跨域问题

    VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 ...

  3. vue中代理实现方法

    vue中代理实现方法如下: const path = require('path'); function resolve(dir) { return path.join(__dirname, dir) ...

  4. npm配置代理

    有时候可能因为使用代理,使用npm下载node模块会报"proxy"相关的错误,error提示ECONNECT,好像是这么拼的. 解决办法 1 配置代理 npm config se ...

  5. vmWare虚拟机下ubuntu配置代理上网

    最终用上了linux,windows下用vmWare安装虚拟机,挂ubuntu 14.04,,认为非常不习惯,非常难侍候. 而且遇到的客观困难还不少,这两天着实费了不少功夫.主要是上班这里上网要配置代 ...

  6. JAVAEE——BOS物流项目08:配置代理对象远程调用crm服务、查看定区中包含的分区、查看定区关联的客户

    1 学习计划 1.定区关联客户 n 完善CRM服务中的客户查询方法 n 在BOS项目中配置代理对象远程调用crm服务 n 调整定区关联客户页面 n 实现定区关联客户 2.查看定区中包含的分区 n 页面 ...

  7. vue配置手机通过IP访问电脑开发环境

    vue配置手机通过IP访问电脑开发环境config/index.js// Various Dev Server settings host: '0.0.0.0', // can be overwrit ...

  8. vue配置手机通过IP访问,Win10让局域网内其他电脑通过IP访问网站的方法

    vue配置手机通过IP访问config/index.js// Various Dev Server settings host: '0.0.0.0', // can be overwritten by ...

  9. docker配置代理的用户名密码

    公司访问外网全部需要经过代理服务器,在使用docker的过程中,发现就算为docker配置了代理,还是会因为没有代理服务器认证,导致pull操作失败,报如下错误: Error response fro ...

随机推荐

  1. Java线程同步操作

    synchronized 作用于对象实例:对给定对象加锁,进入同步代码前要获得给定对象的锁. 作用于实例方法:相当于对当前实例加锁,进入同步代码前要获得当前实例的锁. 作用于静态方法:相当于对当前类加 ...

  2. 词云图value传递数据不显示(已解决)

    问题描述: 今天在做词云图时,虽然词云图能够展现出来,但是后台传递过来的数据(每个词出现的次数)却不显示. 错误原因: 错误的将tooltip写在了series内部,如图: 解决方案: 将toolti ...

  3. ArrayList常用Api分析及注意事项

    数组(定长,有序的,随机访问).ArrayList是Java在数组的基础上进行衍生出来的Java里的一种数据结构,它在拥有数据的特性之外,增加了可变性 (动态数组). 属性 属性 备注 DEFAULT ...

  4. MySQL 事务常见面试题总结 | JavaGuide 审核中

    <Java 面试指北>来啦!这是一份教你如何更高效地准备面试的小册,涵盖常见八股文(系统设计.常见框架.分布式.高并发 ......).优质面经等内容. 本文原发于 MySQL知识点&am ...

  5. v87.01 鸿蒙内核源码分析 (内核启动篇) | 从汇编到 main () | 百篇博客分析 OpenHarmony 源码

    本篇关键词:内核重定位.MMU.SVC栈.热启动.内核映射表 内核汇编相关篇为: v74.01 鸿蒙内核源码分析(编码方式) | 机器指令是如何编码的 v75.03 鸿蒙内核源码分析(汇编基础) | ...

  6. 微信小程序避坑指南——input框里的图标在部分安卓机里无法点击的问题

    问题场景: 下图中的显隐密码和验证码均为包裹在 input标签 中的 image标签, 但在开发测试中发现点击不了这俩个image标签,因为是被input标签的padding挡住了. 解决方法:将im ...

  7. 配置中心Nacos(服务发现)

    服务演变之路 单体应用架构 在刚开始的时候,企业的用户量.数据量规模都⽐较⼩,项⽬所有的功能模块都放在⼀个⼯程中编码.编译.打包并且部署在⼀个Tomcat容器中的架构模式就是单体应用架构,这样的架构既 ...

  8. thusc2022游记

    DAY -1: 刷往年相关的题 DAY 0: 刷会儿题了,搞电脑,下obs.不过,发现电脑出了很多问题. obs没有录频效果,因为卡,杀毒软件把vc++全都删了.因此无dll文件错误,搞了一晚上都没搞 ...

  9. Xmind演讲主题大纲

    参考:https://www.bilibili.com/video/BV1Rb411s7VG?p=9

  10. 物联网lora模块应用案例和LoRawan网关通信技术

    什么是LoRa LoRa(Long Range) 无线通信技术是 Semtech 在2012年开发出来的一款适合物联网使用的射频IC.其设计理念为低功耗.长距离.低成本.网路简单.易于扩展的无线数传技 ...