Vite 3.2.5配置代理proxy,打印代理转发的日志

已于 2022-12-06 13:11:03 修改
阅读量3.8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： VUE 文章标签： vite vue proxy
于 2022-12-06 13:10:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bufegar0/article/details/128201146
本文介绍如何在使用Vite代理模式时查看代理转发的日志，通过启动时添加--debug参数或在proxy配置中使用rewrite函数并配合console.log()进行手动打印的方式实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

需求背景

使用vite代理模式后，想看看vite是否传递参数，故而需要打印出代理的转发日志。

使用方法

启动的时候，带上–debug参数即可。如下所示

npx vite --debug

另一种是借用 proxy 配置中的 rewrite 函数手动打印，例如 console.log()。自行尝试即可

样例

https://gitee.com/matevip/artemis

代理篇12|深入理解 Vite中的Proxy接口代理配置
石小石Orz的博客
06-09 257
代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕过浏览器的跨域限制。比如前端发起请求：http://localhost:5173/api/user通过proxy转发代理，最后的实际请求如下：注意：浏览器控制台的请求依旧是，但后端接受的。
谈一谈前端构建工具的本地代理配置（Webpack与Vite）
Coding home - 漂流瓶jz
01-20 1576
使用代理之后，在浏览器中，前端访问还是原来的非跨域的接口，但实际请求后端的url可能早就被改的面目全非了。
vue3+vite：本地代理，配置proxy
snow的博客
05-17 3万+
proxy: { '/m-staff-center': { // localhost:3000/m-staff-center target: 'https://www.abc.com/', // 代理的目标地址 changeOrigin: true, // 开发模式，默认的origin是真实的 origin:localhost:3000 代理服务会把origin修改为目标地址 // se.
vite+vue本地开发代理查看代理详情日志
wobofan2006的博客
09-19 1669
如下这般在vue-cli里有效的logLevel: 'debug’在vite环境下无效。然后要在package.json的启动命令里加上–debug。
Vite Proxy配置详解：从入门到实战应用
最新发布
陆小森_红齐飘飘的博客
05-10 1246
proxy: {== -1) {Vite的Proxy配置简单强大，能有效解决开发中的跨域问题。通过灵活配置可以满足各种复杂场景需求。提示：生产环境应使用Nginx等服务器处理代理，Vite代理仅用于开发环境。
vite 完整打印debug调试日志
鸿仔的博客
05-08 3092
【代码】vite 完整打印debug调试日志。
【前端工程化】经验总结01- vite项目打包buid之后会自动把所有的console.log过滤掉，生产环境打印日志log的方法，封装WebLogger打印日志
有一棵树的博客
09-07 3652
【前端工程化】经验总结01- vite项目打包buid之后会自动把所有的console.log过滤掉，生产环境打印日志log的方法，封装WebLogger打印日志
如何配置vite的proxy，以及解决post请求403问题
少油少盐不要辣
04-03 6328
vite项目，本地开发环境可以通过配置proxy代理实现跨域请求。但是生产环境，该配置不生效，一般使用nginx 转发，或者后端配置cors。
vite配置请求转发
qq_36022463的博客
12-01 523
【代码】vite配置请求转发。
Vue使用Proxy代理后仍无法生效的解决
01-21
vue.js 配置了前端代理却未能生效 记录一下最近踩得小坑： 配置完代理后请一定重新执行（重要，非常重要！） npm run dev 若重新执行命令后，代理仍为生效，请按下方步骤进行检查： 检查index.js文件中的代理是否...
vue用vite配置代理解决跨域问题（target、rewrite和changeOrigin的使用场景）
weixin_44161385的博客
06-04 4925
vue配置解决跨域
vue config.js proxy 代理使用记录
for_story的博客
12-21 2744
vue config.js proxy 代理使用记录 访问开发环境： proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: `http://192.168.2.37:8084`, changeOrigin: true, logLevel:'deb
vite/Vuecli配置proxy代理解决跨域
Suk__的博客
04-20 7170
上代码: import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { resolve } from 'path'; // https://vitejs.dev/config/ export default defineConfig({ server: { port: 9090, strictPort: true, // 严格端口 true:如果端口已被使用，则直接退出，而不会再
Vite配置Proxy代理解决跨域问题
~~~
05-29 2万+
vite配置proxy代理属于node中间件代理，简单来说，就是通过开启一个代理服务器，来充当一个中间层的角色，拦截前端发起的请求。代理服务器实际做的事：会在前端页面发起请求时，将请求**转发**到真实的后端服务器，然后响应给浏览器。利用服务器之间不存在同源策略限制的原理，整个过程通过代理服务器完成，浏览器是无感的，就会绕过浏览器的同源策略。
Vite 配置代理 Proxy，解决跨域
热门推荐
wsdshdhdhd的博客
08-15 3万+
我们在编写前端项目的时候，经常会遇到跨域的问题，当我们访问后端 API 的 URL 路径时，只要域名、端口或访问协议（如 HTTP 和 HTTPS）有一项不同，就会被浏览器认定为跨域。另外我们也会经常重复编写后端的域名，例如，，针对这两种情况，可以直接用同一个配置来解决，即代理配置。​。...
vue+vite项目配置proxy输出代理后的完整接口路径
weixin_44463883的博客
09-12 630
【代码】vue+vite项目配置proxy输出代理后的完整接口路径。
vue3中打印reactive类型的proxy值
weixin_44257678的博客
09-23 416
之前用的vue2比较多，打印值挺方便，可是自从换了vue3，值类型都变成了proxy值，直接console.log(xx)打印不出来。原来在vue3要使用 toRaw。
Vue localhost 中查看 proxy 后的实际访问IP地址
轻风细雨_林木木
02-07 4076
在使用vue-cli脚手架时，我们为了做到本地跨域会设置proxy达到跨域调用的效果，但是不方便查看实际调用IP地址，这个时候就需要logLevel属性了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值