Vue 配置代理
说明:这里的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 配置代理的更多相关文章
- react和vue配置本地代理
React 在react中配置开发环境下的本地代理相对比较简单,直接在package.json文件中修改即可. 但是这样做有其局限性,如果开发中代理多个接口的时候将无法满足需求,我们需要的是下面这种的 ...
- VUE前端项目配置代理解决跨域问题
VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 ...
- vue中代理实现方法
vue中代理实现方法如下: const path = require('path'); function resolve(dir) { return path.join(__dirname, dir) ...
- npm配置代理
有时候可能因为使用代理,使用npm下载node模块会报"proxy"相关的错误,error提示ECONNECT,好像是这么拼的. 解决办法 1 配置代理 npm config se ...
- vmWare虚拟机下ubuntu配置代理上网
最终用上了linux,windows下用vmWare安装虚拟机,挂ubuntu 14.04,,认为非常不习惯,非常难侍候. 而且遇到的客观困难还不少,这两天着实费了不少功夫.主要是上班这里上网要配置代 ...
- JAVAEE——BOS物流项目08:配置代理对象远程调用crm服务、查看定区中包含的分区、查看定区关联的客户
1 学习计划 1.定区关联客户 n 完善CRM服务中的客户查询方法 n 在BOS项目中配置代理对象远程调用crm服务 n 调整定区关联客户页面 n 实现定区关联客户 2.查看定区中包含的分区 n 页面 ...
- vue配置手机通过IP访问电脑开发环境
vue配置手机通过IP访问电脑开发环境config/index.js// Various Dev Server settings host: '0.0.0.0', // can be overwrit ...
- vue配置手机通过IP访问,Win10让局域网内其他电脑通过IP访问网站的方法
vue配置手机通过IP访问config/index.js// Various Dev Server settings host: '0.0.0.0', // can be overwritten by ...
- docker配置代理的用户名密码
公司访问外网全部需要经过代理服务器,在使用docker的过程中,发现就算为docker配置了代理,还是会因为没有代理服务器认证,导致pull操作失败,报如下错误: Error response fro ...
随机推荐
- 百万数据 mysql count(*)优化
一.故事背景有一张 500w 左右的表做 select count(*) 速度特别慢. 二.原 SQL 分析Server version: 5.7.24-log MySQL Community Ser ...
- zabbix 线路质量监控自定义python模块(Mysql版),多线程(后来发现使用协程更好)降低系统消耗
之前零零碎碎写了一些zabbix 线路监控的脚本,工作中agnet较多,每条线路监控需求不一致,比较杂乱,现在整理成一个py模块,集合之前的所有功能 环境 python3.6以上版本,pip3(pip ...
- 1.还不会部署高可用的kubernetes集群?看我手把手教你使用二进制部署v1.23.6的K8S集群实践(上)
公众号关注「WeiyiGeek」 设为「特别关注」,每天带你玩转网络安全运维.应用开发.物联网IOT学习! 本章目录: 0x00 前言简述 0x01 环境准备 主机规划 软件版本 网络规划 0x02 ...
- C# settings 文件基础用法
原文 自定义设置项类型 Serializable 修饰的枚举,可作为设置项类型 [Serializable] public enum DeviceBrand { None = 0, [Descript ...
- Python Beautiful Soup库
Beautiful Soup库 Beautiful Soup库:https://www.crummy.com/software/BeautifulSoup/ 安装Beautiful Soup: 使用B ...
- DirectX11 With Windows SDK--19(Dev) 编译Assimp并加载模型、新的Effects框架
前言 注意:这一章进行了重写,对应教程Dev分支第19章的项目,在更新完后面的项目后会替换掉原来第19章的教程 在前面的章节中我们一直使用的是由代码生成的几何模型,但现在我们希望能够导入模型设计师生成 ...
- 开源流程引擎camunda如何扩展
市场上基于Java语言的开源工作流引擎有:osworkflow.jbpm.activiti.flowable.camunda等,其中osworkflow.jbpm流程引擎已经过时,目前主流的开源 ...
- Blazor WebAssembly + Grpc Web = 未来?
Blazor WebAssembly是什么 首先来说说WebAssembly是什么,WebAssembly是一个可以使C#,Java,Golang等静态强类型编程语言,运行在浏览器中的标准,浏览器厂商 ...
- TypeScript(4)接口
介绍 TypeScript 的核心原则之一是对值所具有的结构进行类型检查.我们使用接口(Interfaces)来定义对象的类型.接口是对象的状态(属性)和行为(方法)的抽象(描述) 接口初探 声明接口 ...
- Windows下maven配置环境变量
右键 "计算机",选择 "属性",之后点击 "高级系统设置",点击"环境变量",来设置环境变量,有以下系统变量需要配置: ...