Vue多地址代理端口调用

第一种方法

config.ts文件

配置多条代理服务端口 如下所示:
proxy: {'/app': {// 其他的端口target: 'http://125.124.5.117:12877/',changeOrigin: true}'/api': {//默认的端口// http://192.168.31.53:5173/target: 'http://192.168.31.199:18777/',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}, 

封装的axios请求

src/utils/request.ts
import axios from 'axios';const defaultConfig = {timeout: 5 * 1000,baseURL:'/api'  // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有接口都会加上'/api'前缀在,//页面里面写接口的时候就不要加 '/api'了,否则会出现2个'/api',类似 '/api/api/user'这样的报错,切记!!
};
const instance = axios.create(Object.assign({}, defaultConfig));instance.interceptors.request.use(function (config) {...return config;},function (error) {return Promise.reject(error);}
);
instance.interceptors.response.use(function (response) {...},function (error) {...return Promise.reject(error);}
);
export default instance;

请求时——

import request from '@/src/utils/request.js'// 获取IP列表 (这个会默认用前缀 '/api')
export const getList = data => {return request({url: '/ipv6/list',method: 'post',data});
};// 获取IP列表  (手动加另一个前缀 '/app')
export const getList = data => {return request({url: '/ipNetin/list',baseURL: '/app', // 这个 baseURL 会覆盖实例中默认的 baseURL(这里是动态的直接回覆盖默认的前缀)method: 'post',data});
};

第二种

config.ts文件

配置多条代理服务端口 如下所示:
PS(/^\/api/app, '/app')主要是这个 app是api的子级 然后指向 /app
proxy: {'/api/app': {// 其他的端口target: 'http://125.124.5.117:12877/',changeOrigin: true,rewrite: path => path.replace(/^\/api/app, '/app')//注意注意这里的区别// PS:(/^\/api/app, '/app')主要是这个 app是api的子级 然后指向 /app}'/api': {//默认的端口// http://192.168.31.53:5173/target: 'http://192.168.31.199:18777/',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}, 

封装的axios请求

src/utils/request.ts
import axios from 'axios';const defaultConfig = {timeout: 5 * 1000,baseURL:'/api'  // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有接口都会加上'/api'前缀在,//页面里面写接口的时候就不要加 '/api'了,否则会出现2个'/api',类似 '/api/api/user'这样的报错,切记!!
};
const instance = axios.create(Object.assign({}, defaultConfig));instance.interceptors.request.use(function (config) {...return config;},function (error) {return Promise.reject(error);}
);
instance.interceptors.response.use(function (response) {...},function (error) {...return Promise.reject(error);}
);
export default instance;

请求时——

import request from '@/src/utils/request.js'// 获取IP列表 (这个会默认用前缀 '/api')
export const getList = data => {return request({url: '/ipv6/list',method: 'post',data});
};// 获取IP列表  (手动加另一个前缀 '/app')
export const getList = data => {return request({url: '/ipNetin/list',//这里就不要多加/app了 不要写配置代理的前缀了 注意注意method: 'post',data});
};
这是大概的方法 具体详细方法跟这类似 也差不多 

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

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

相关文章

青少年编程与数学 02-018 C++数据结构与算法 10课题、搜索[查找]

青少年编程与数学 02-018 C数据结构与算法 10课题、搜索[查找] 一、线性搜索(Linear Search)原理实现步骤代码示例(C)复杂度分析优缺点 二、二分搜索(Binary Search)原理代码示例(C)…

Linux操作系统从入门到实战(三)Linux基础指令(上)

Linux操作系统从入门到实战(三)Linux基础指令(上) 前言一、ls 指令二、pwd三、cd四、touch 指令五、mkdir六、rmdir 指令和 rm 指令七、man 指令八、cp九、mv 指令十、cat 指令十一、 more 指令十二、less 指令十四、head 指令十五…

Java对象转换的多种实现方式

Java对象转换的多种实现方式 在Java开发中,对象转换是一个常见的需求。特别是在不同层次间传递数据时,通常需要将一个对象转换为另一个对象。虽然JSON序列化/反序列化是一种常见的方法,但在某些场景下可能并不是最佳选择。本文将总结几种常见…

头歌实训之索引

🌟 各位看官好,我是maomi_9526! 🌍 种一棵树最好是十年前,其次是现在! 🚀 今天来学习C语言的相关知识。 👍 如果觉得这篇文章有帮助,欢迎您一键三连,分享给更…

Rundeck 介绍及安装:自动化调度与执行工具

Rundeck介绍 概述:Rundeck 是什么? Rundeck 是一款开源的自动化调度和任务执行工具,专为运维场景设计,帮助工程师通过统一的平台管理和执行跨系统、跨节点的任务。它由 PagerDuty 维护(2016 年收购)&#…

基于 Python 的自然语言处理系列(85):PPO 原理与实践

📌 本文介绍如何在 RLHF(Reinforcement Learning with Human Feedback)中使用 PPO(Proximal Policy Optimization)算法对语言模型进行强化学习微调。 🔗 官方文档:trl PPOTrainer 一、引言&…

珍爱网:从降本增效到绿色低碳,数字化新基建价值凸显

2024年12月24日,法大大联合企业绿色发展研究院发布《2024签约减碳与低碳办公白皮书》,深入剖析电子签在推动企业绿色低碳转型中的关键作用,为企业实现环境、社会和治理(ESG)目标提供新思路。近期,法大大将陆…

Java实现HTML转PDF(deepSeekAi->html->pdf)

Java实现HTML转PDF,主要为了解决将ai返回的html文本数据转为PDF文件方便用户下载查看。 一、deepSeek-AI提问词 基于以上个人数据。总结个人身体信息,分析个人身体指标信息。再按一个月为维度,详细列举一个月内训练计划,维度详细至每周每天…

Estimands与Intercurrent Events:临床试验与统计学核心框架

1. Estimands(估计目标)概述 1.1 定义与作用 1.1.1 定义 Estimand是临床试验中需明确提出的科学问题,即研究者希望通过数据估计的“目标量”,定义“治疗效应”具体含义,确保分析结果与临床问题一致。 例如,在研究某种新药对高血压患者降压效果时,Estimand可定义为“在…

Jsp技术入门指南【十】IDEA 开发环境下实现 MySQL 数据在 JSP 页面的可视化展示,实现前后端交互

Jsp技术入门指南【十】IDEA 开发环境下实现 MySQL 数据在 JSP 页面的可视化展示,实现前后端交互 前言一、JDBC 核心接口和类:数据库连接的“工具箱”1. 常用的 2 个“关键类”2. 必须掌握的 5 个“核心接口” 二、创建 JDBC 程序的步骤1. 第一步&#xf…

深入理解HotSpot JVM 基本原理

关于JAVA Java编程语言是一种通用的、并发的、面向对象的语言。它的语法类似于C和C++,但它省略了许多使C和C++复杂、混乱和不安全的特性。 Java 是几乎所有类型的网络应用程序的基础,也是开发和提供嵌入式和移动应用程序、游戏、基于 Web 的内容和企业软件的全球标准。. 从…

【HTTP/3:互联网通信的量子飞跃】

HTTP/3:互联网通信的量子飞跃 如果说HTTP/1.1是乡村公路,HTTP/2是现代高速公路系统,那么HTTP/3就像是一种革命性的"传送门"技术,它彻底重写了数据传输的底层规则,让信息几乎可以瞬间抵达目的地,…

Apipost免费版、企业版和私有化部署详解

Apipost是企业级的 API 研发协作一体化平台,为企业提供 API研发测试管理全链路解决方案,不止于API研发场景,增强企业API资产管理。 Apipost 基于同一份数据源,同时提供给后端开发、前端开发、测试人员使用的接口调试、Mock、自动化…

使用若依二次开发商城系统-1:搭建若依运行环境

前言 若依框架有很多版本,这里使用的是springboot3vue3这样的一个前后端分离的版本。 一.操作步骤 1 下载springboot3版本的后端代码 后端springboot3的代码路径,https://gitee.com/y_project/RuoYi-Vue 需要注意我们要的是springboot3分支。 先用g…

速成GO访问sql,个人笔记

更多个人笔记:(仅供参考,非盈利) gitee: https://gitee.com/harryhack/it_note github: https://github.com/ZHLOVEYY/IT_note 本文是基于原生的库 database/sql进行初步学习 基于ORM等更多操作可以关注我…

【C++指南】告别C字符串陷阱:如何实现封装string?

🌟 各位看官好,我是egoist2023! 🌍 种一棵树最好是十年前,其次是现在! 💬 注意:本章节只详讲string中常用接口及实现,有其他需求查阅文档介绍。 🚀 今天通过了…

系统架构师2025年论文《论软件架构评估2》

论软件系统架构评估 v2.0 摘要: 某市医院预约挂号系统建设推广应用项目是我市卫生健康委员会 2019 年发起的一项医疗卫生行业便民惠民信息化项目,目的是实现辖区内患者在辖区各公立医疗机构就诊时,可以通过多种线上渠道进行预约挂号,提升就医体验。我作为系统架构师参与此…

BEVDet4D: Exploit Temporal Cues in Multi-camera 3D Object Detection

背景 对于现有的BEVDet方法,它对于速度的预测误差要高于基于点云的方法,对于像速度这种与时间有关的属性,仅靠单帧数据很难预测好。因此本文提出了BEVDet4D,旨在获取时间维度上的丰富信息。它是在BEVDet的基础上进行拓展,保留了之前帧的BEV特征,并将其进行空间对齐后与当…

el-upload 上传逻辑和ui解耦,上传七牛

解耦的作用在于如果后面要我改成从阿里云oss上传文件,我只需要实现上传逻辑从七牛改成阿里云即可,其他不用动。实现方式有2部分组成,一部分是上传逻辑,一部分是ui。 上传逻辑 大概逻辑就是先去服务端拿上传token和地址&#xff0…

酒水类目电商代运营公司-品融电商:全域策略驱动品牌长效增长

酒水类目电商代运营公司-品融电商:全域策略驱动品牌长效增长 在竞争日益激烈的酒水市场中,品牌如何快速突围并实现长效增长?品融电商凭借「效品合一 全域增长」方法论与全链路运营能力,成为酒水类目代运营的领跑者。从品牌定位、视…