vue3 借助vite配置了proxy代理情况,查看真实的接口调用地址方法

server/2024/9/23 7:27:22/

参考 https://blog.csdn.net/weixin_43606158/article/details/132436745

在浏览器查看请求头和响应头发现只有代理前的url,没有显示代理后的路径

  • vite.config.ts
    server: {proxy: {[env.VITE_APP_BASE_API]: {target: env.VITE_SERVE, //获取数据的服务器地址设置changeOrigin: true, //需要代理跨域rewrite:(path)=>path.replace(/^\/api/,''),// 路径重写 不要api的意思bypass(req, res, options) {//@ts-ignoreconst proxyUrl = new URL(options.rewrite(req.url) || '',(options.target)as string)?.href || '';console.log(proxyUrl);req.headers['x-req-proxyUrl'] = proxyUrlres.setHeader('x-res-proxyUrl',proxyUrl)},}}}

在这里插入图片描述

  • 在控制台的header中就能查看到了
    在这里插入图片描述
  • 补充一下这个完整路径的由来

登陆按钮在login/index.vue中,点击后的回调函数里 调用pinia仓库(user仓库)提供的登录接口userLogin,同时传递数据过去。

仓库中的userLogin,是调用了api接口的方法

api接口使用的axios是经过二次封装之后的,axios有基本路径baseURL(源自env.development),以及请求路径(仓库调用时传参)。

此时的路径是/api/user/login。发送请求时,通过vite代理,在前面加上env.VITE_SERVE,同时rewrite。


http://www.ppmy.cn/server/101387.html

相关文章

Electron 集成 Express + p-limit + SQlite WAL读写模式解决并发锁库的问题

背景 经过通信层面的优化后,我们不再走 Electron 提供的内置进程间通信 IPC,改为利用 Express 提供的 Http 本地服务来进行多处直达通信机制,同时利用本地 Sqlite 来保存大量数据,但 Express 提供的本地服务是支持并发请求的&…

使用Python将xml标注文件转换为coco json格式

文章目录 前言一、读取xml文件二、获取文件路径模块三、XML转COCO JSON模块四、主程序总结附:完整代码 前言 在计算机视觉领域,特别是目标检测任务中,不同的数据集采用了不同的标注格式。Pascal VOC数据集使用XML文件进行目标检测的标注&…

【Leetcode 645 】 错误的集合 —— 纯数学 之 等差数列求和

集合 s 包含从 1 到 n 的整数。不幸的是,因为数据错误,导致集合里面某一个数字复制了成了集合里面的另外一个数字的值,导致集合 丢失了一个数字 并且 有一个数字重复 。 给定一个数组 nums 代表了集合 S 发生错误后的结果。 请你找出重复出…

VSCode配置ssh免密连接远程服务器

我配置了免密设置(Windows利用ssh免密码登录Linux),git bash已经能够正常连接了,但是vscode还是不行,很奇怪。 VSCode报错信息: [17:55:50.360] SSH Resolver called for "ssh-remote106.52.2.19", attempt 5, (Recon…

xss复现

目录 反射型 Ma Spaghet! Jefff Ugandan Knuckles onfocus Ricardo Milos Ah Thats Hawt location Ligma Mafia 构造函数 dom破坏 Ok, Boomer 反射型 Ma Spaghet! <!-- Challenge --> <h2 id"spaghet"></h2> <script>spaghe…

【鸿蒙学习】使用HarmonyOS NEXT与Uniapp开发同一鸿蒙应用的区别及分析

随着鸿蒙操作系统的普及&#xff0c;开发者面临着多种开发工具的选择。本文将通过开发、部署、运行、使用四个方面&#xff0c;详细分析使用HarmonyOS NEXT与Uniapp开发同一鸿蒙应用的区别&#xff0c;为开发者提供参考。 一、引言 鸿蒙操作系统&#xff08;HarmonyOS&#xf…

C# XML 加密解密

步骤 1: 生成RSA密钥 首先&#xff0c;我们需要生成一个RSA密钥对&#xff0c;用于加密和解密。 using System; using System.Security.Cryptography; using System.Xml;public class XmlEncryptionExample {public static RSAParameters publicKey;public static RSAParamet…

speech语音audio音频

在信号处理和语言技术领域&#xff0c;speech 和 audio 是两个相关但不同的概念。它们有各自的定义和应用场景。以下是对这两个术语的详细解释&#xff1a; 1. Speech&#xff08;语音&#xff09; Speech 主要指的是人类说话时产生的声音。它是人类语言交流的一种主要形式&a…