vite中配置了proxy代理，如何查看代理之后的真实接口地址？

本文详细介绍了Vite开发环境中proxy代理的3种实战方法，帮助开发者快速定位真实接口地址。通过响应头注入法、请求拦截打印法和Chrome开发者工具过滤技巧，解决接口代理黑盒问题，提升开发效率。文章还提供了代码片段和选型建议，适合不同开发场景的需求。

proxy: { '/m-staff-center': { // localhost:3000/m-staff-center target: 'https://www.abc.com/', // 代理的目标地址 changeOrigin: true, // 开发模式，默认的origin是真实的 origin:localhost:3000 代理服务会把origin修改为目标地址 // se.

在vite.config.ts同级目录添加两个文件。在vscode终端，按需执行以下命令。编辑package.json文件。

本文详细介绍了Vite项目中三种高效追踪API请求真实路径的技术方案，包括响应头注入、控制台日志和自定义中间件。这些方法帮助开发者解决proxy代理配置下的调试难题，提升开发效率，特别适合多环境切换和接口联调场景。

然后发现一个bypass函数，但是此函数只能修改res响应头的数据，没法修改req请求头的数据，于是我将代理后的实际路径，设置到了相应头上面，方便分析代理后的实际路径，如图。其实，就是自己拼装了一下数据，将实际的请求路径拼接好，然后放在响应头上。在浏览器查看请求头和响应头发现只有代理前的url，没有显示代理后的路径。然后就可以在响应头上面看到实际的 真实代理路径了。在vite.config.ts配置了代理。使用vite进行代理。

vue3+vite 配置请求代理

vue配置了代理，但访问后台总是404，怀疑是路径问题，但控制台看不到真实路径很难受。

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

不论是vue.config.js还是vite.config.js中都有前端跨域的配置。以上内容来自：https://juejin.cn/post/7041441723238580238。注：在浏览器的DevTools中查看接口，并不能显示出来真实的代理路径。答：用代理首先你得有一个标识，表明你的这个连接要使用代理，不然的话。去掉，这样既能有正确的标识，又能在请求接口的时候去掉。可是不对呀，我正确的接口路径里面是没有。开头的才使用代理，所以接口都写成。,这是发起请求的服务地址。，最后代理的路径就是。

下面这段加完之后可以在浏览器打印上看到 真实请求的后端地址，否则f12网络看到的只是浏览器的ip和端口号，我因为这个一直以为配置不能生效呢，后来想到可能只是不显示真实地址，因为换了好几个框架都是不行但改完这个地址 网页数据就加载不到了想到的。// 将真实请求地址设置到响应头中。

总结记录

vue项目部署问题

【代码】vue+vite项目配置proxy输出代理后的完整接口路径。

Vite 常规配置

我们在做项目的时候经常会遇到跨域的问题，之所以会出现跨域问题是因为浏览器的同源策略，即协议、域名、端口需要一致，才可以访问服务端的资源。当一个请求地址（服务端的地址）的协议、域名、端口三者之间任意一个与当前页面地址（前端页面地址）不同即为跨域。代理就是通过一个特定的网络服务去访问另一网络服务的一种间接访问方式。就像我们访问国外网站使用VPN一样，同样也是使用了代理。

下面是一个简单的示例，假设我们需要访问 http://example.com/api，但是该接口在开发环境中会出现跨域问题，这时可以通过配置代理，让接口请求转发到本地服务器进行处理。在 Vue.js 中使用 vite 搭建应用时，可以通过 vite.config.js 文件进行跨域代理的配置。在配置完成后，就可以在代码中直接访问。以上代码中，我们使用了。

【代码】vite本地配置代理。

Vue3配置代理跨域和服务端口等配置，可以在 vite.config.js 进行配置。(类似用 vue-cli 的 vue.config.js）

在axios里面先创建实例 import axios from 'axios' const requests = axios.create({ baseURL: '/api', timeout: 5000 }) export default requests; 然后配置,拦截api开头的请求,把它代理到远程服务器,再把api干掉 server: { proxy: { '/api': { target: 'http://localhost:3005',