vue.config.js中proxy配置

这里以axios发请求为例

axios.get("/abc/def");
axios.get("/abc/ghi");
axios.post("/abc/jkm");
//axios发送的请求是本地的服务器地址拼接上发送的请求,如 http://localhost:8080/abc/def

如果发送的请求都以 /abc 开头,那么我们就可以在proxy中进行服务器代理配置。

devServer: {proxy: {"/abc": {target: "https://XX.XX.XX.XX:8081",changeOrigin: true,ws: true,secure: false,},},
},
// "/abc":{} : 引号中代表监测的是以 /abc 开头的接口
// target : 代表监测到以 /abc 开头的接口后,把axios请求中前面的本地服务器地址改为后端接口地址,实际发送给后端的请求就是下方后一个请求:http://localhost:8080/abc/def -->http://XX.XX.XX.XX:8081/abc/def
// changeOrigin : 是否跨域
// ws : 如果要代理 websockets,配置这个参数
// secure : 如果是https接口,需要配置这个参数,注:代理https时参数值必须为false(如果是http接口,也可以不写这个参数)
// pathRewrite :替换请求中匹配的内容。在3的方法2中详细解释用法,上方未使用此参数

3.代理多个接口

axios.get("/zzz/one");  // http://localhost:8080/zzz/one
axios.get("/ccc/two");  // http://localhost:8080/ccc/two

方法1:监测多个接口,可以在proxy中写多个配置:(适用于target不同的代理,相同也可以用这个方法,就是会麻烦一点,对于相同的target方法2会比较方便)

devServer: {proxy: {"/zzz": {target: "http://XX.XX.XX.XX:8082",changeOrigin: true,ws: true,},"/ccc": {target: "http://XX.XX.XX.XX:8083",changeOrigin: true,ws: true,},},
},
// 那么实际发送给后端的请求就是:
// http://XX.XX.XX.XX:8082/zzz/one
// http://XX.XX.XX.XX:8083/ccc/two

方法2:使用axios进行前设置(适用于target相同的代理)

// 一般在全局设置里引入,例如main.js,方便第二行的配置被每一个axios请求识别
import axios from "axios";
// 只要发送axios请求,就在请求前加入/api的开头,例如 /zzz/one -> /api/zzz/one
axios.defaults.baseURL = "/api";

进行了上方的配置后,在本地发送的请求会变为

http://localhost:8080/api/zzz/one
http://localhost:8080/api/ccc/two

而后可以设置只监听 “/api” 的代理,不过要设置pathRewrite参数:

devServer: {proxy: {"/api": {target: "http://XX.XX.XX.XX:8084",changeOrigin: true,ws: true,pathRewrite: { "^/api": "" },},},
},
// pathRewrite :检查代理的请求中是否有 /api ,有的话把 /api 替换为冒号后面的内容,案例为替换成空字符串,也就是删去 /api 。(^是正则表达式的内容,意思是限定开头)

如果不懂 我在下面举个列子把

http://localhost:8080/api/zzz/one
实际发送给后端的请求就是
http://XX.XX.XX.XX:8084/zzz/one

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/693583.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis面试题关于持久化的问题

什么是Redis持久化?Redis有哪几种持久化方式?优缺点是什么? 持久化就是把内存的数据写到磁盘中去,防止服务宕机了内存数据丢失。 Redis 提供了两种持久化方式:RDB(默认) 和AOF RDB: rdb是Red…

考什么呢?

年后的第一天复工: 请了一天假,迟回来一天,等到中午吃饭的时候,有些恍惚,感觉身边的人自从上班之后,每天过的麻木的生活,到饭点了,就去吃饭,生活没有一丝激情&#xff0c…

C语言获取时间函数大全

一、最简单获取秒数的&#xff0c;windows和linux逗支持用time()函数,获取从1970年到现在过了多少秒&#xff0c;time_t其实是long int 类型 time_t starttime(NULL); for(long i0;i<10000000000;) i1; time_t endtime(NULL) printf("经过了%d秒",end-start); 二…

五种多目标优化算法(MOJS、MOGWO、NSWOA、MOPSO、NSGA2)性能对比,包含6种评价指标,9个测试函数(提供MATLAB代码)

一、5种多目标优化算法简介 1.1MOJS 1.2MOGWO 1.3NSWOA 1.4MOPSO 1.5NSGA2 二、5种多目标优化算法性能对比 为了测试5种算法的性能将其求解9个多目标测试函数&#xff08;zdt1、zdt2 、zdt3、 zdt4、 zdt6 、Schaffer、 Kursawe 、Viennet2、 Viennet3&#xff09;&#xff0…

域名 SSL 证书信息解析 API 数据接口

域名 SSL 证书信息解析 API 数据接口 网络工具&#xff0c;提供域名 SSL 证书信息解析&#xff0c;多信息查询&#xff0c;毫秒级响应。 1. 产品功能 提供域名 SSL 证书信息解析&#xff1b;最完整 SSL 属性信息解析&#xff1b;支持多种元素信息抽取&#xff0c;包括主题的可…

Sample Pairing(ICLR 2018)

paper&#xff1a;Data Augmentation by Pairing Samples for Images Classification 本文的创新点 本文提出了一种新的应用于图像分类的数据增强方法SamplePairing&#xff0c;这种简单的数据增强技术显著提高了所有测试的数据集的分类精度。此外当训练集中的样本数量非常少…

Web前端3D JS框架和库 整理

在WebGL库和SVG/Canvas元素的支持下&#xff0c;JavaScript变得惊人的强大。几乎可以为网络构建任何东西&#xff0c;包括基于浏览器的游戏和本地应用&#xff0c;许多最新的突破性功能都在3D上运行。 为此&#xff0c;「数维图小编」整理了19个交互式3D Javascript库和框架&am…

NestJS入门6:日志中间件

前文参考&#xff1a; NestJS入门1 NestJS入门2&#xff1a;创建模块 NestJS入门3&#xff1a;不同请求方式前后端写法 NestJS入门4&#xff1a;MySQL typeorm 增删改查 NestJS入门5&#xff1a;加入Swagger 1. 安装 nest g middleware logger middleware​ ​ ​ 2. lo…

关于发送邮件时Reply Reply All和Forward的区别

我们发送邮件的时候总是会纠结到底是用回复&#xff0c;还是回复全部&#xff0c;还是转发。 回复- 仅回复发件人。 全部回复- 回复发件人和抄送/密件抄送的联系人。 转发- 将电子邮件的副本发送给其他收件人。 这几种情形分别在什么时候用呢&#xff1f; 回复 比如Alen给你…

Linux怎么查看boot目录的挂载分区

要查看 Linux 中 /boot 目录的挂载分区&#xff0c;可以使用以下命令&#xff1a; df -h /boot 这条命令将显示 /boot 目录所在的文件系统的相关信息&#xff0c;包括文件系统的设备、挂载点、容量、已用空间、可用空间和挂载类型等。 另外&#xff0c;你也可以通过查看 /etc/f…

阿里云带宽

&#x1f4d1;前言 本文主要是如何将阿里云服务器迁移实现数据转移的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️** &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1a;CSDN主页放风讲故事 &#x1f304;每日…

SQL Server查询计划(Query Plan)——文本查询计划

​​​​​ 6.4.1. 文本查询计划 SQL Server中,除了通过GUI工具获取图形查询计划外,我们还可以通过相关命令获取文本格式的查询计划,这里惯称其为文本查询计划。文本查询计划中,SQL Server通过单独的一行来表示查询计划中的每个操作符,通过缩进格式和竖线(字符“|”)来…

两年外包生涯做完,感觉自己废了一半....

先说一下自己的情况。大专生&#xff0c;17年通过校招进入湖南某软件公司&#xff0c;干了接近2年的点点点&#xff0c;今年年上旬&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落&#xff01;而我已经在一个企业干了五年的功能测试…

golang入门介绍-1

今天开始发布关于go语言入门到实战内容&#xff0c;各位小伙伴准备好。 go介绍 Go语言&#xff08;或 Golang&#xff09;起源于 2007 年&#xff0c;并在 2009 年正式对外发布。是由 Google 公司开发的一种静态强类型、编译型、并发型、并具有垃圾回收功能的编程语言。 Go 是…

YOLOv5 + Flask + Vue实现基于深度学习算法的垃圾检测系统源码+数据库

✨界面展示 登录 注册 垃圾检测 用户管理 404 Not Found页面 403 拒绝访问页面 黑暗模式 深蓝模式 灰色模式 色弱模式 ✨技术特性 深度学习 YOLOv5&#x1f680;&#xff1a;高效、准确的目标检测算法&#xff0c;实时识别检测图像和视频中的各种对象PyTorch&#xff1a;机器…

【centos】【vsftpd】本地用户登录配置

目录 安装vsftpd和ftp本地用户登录-不限制访问目录本地用户登录-限制访问目录有可能影响连接的问题pam认证selinux策略被动模式防火墙ipv4和ipv6 报错1、 530 Login incorrect2、500 OOPS: vsftpd: refusing to run with writable root inside chroot()3、227 Entering Passive…

Avue实现批量删除等功能(附Demo)

目录 前言1. 公共逻辑2. 单个删除3. 批量删除 前言 由于近期慢慢转全栈&#xff0c;后续会以前后端的形式讲解 对应的Avue相关知识推荐阅读&#xff1a;【vue】avue-crud表单属性配置&#xff08;表格以及列&#xff09;对应后端知识推荐阅读&#xff1a;java框架 零基础从入…

Python3 TCP 客户端

下面是一个简单的 Python TCP 客户端示例代码&#xff0c;用于与之前提到的 EchoServer 进行通信&#xff1a; import socketserver_address (localhost, 8888)# 创建 TCP 客户端套接字 client_socket socket.socket(socket.AF_INET, socket.SOCK_STREAM)try:# 连接到服务器…

Leetcode刷题笔记题解(C++):83. 删除排序链表中的重复元素

思路&#xff1a;链表相关的问题建议就是画图去解决&#xff0c;虽然理解起来很容易&#xff0c;但就是写代码写不出来有时候&#xff0c;依次去遍历第二节点如果与前一个节点相等则跳过&#xff0c;不相等则遍历第三个节点 /*** Definition for singly-linked list.* struct …

异常检测入门:使用Python和Scikit-learn实现基于Isolation Forest的异常检测

文章标题&#xff1a;异常检测入门&#xff1a;使用Python和Scikit-learn实现基于Isolation Forest的异常检测 简介 异常检测是机器学习中的一个重要领域&#xff0c;它涉及识别数据集中的异常或异常模式。Isolation Forest是一种常用的异常检测算法&#xff0c;它基于随机森…