解决使用Charles将页面请求代理到本地devServer后热更新失效的问题

本文详细描述了在使用Charles将线上页面请求代理到本地devServer时遇到的热更新失效问题及其解决过程。通过分析现象、首次尝试失败的原因,以及第二次尝试的调整,最终找到了确保热更新正常进行的关键条件,包括请求的成功响应、WebSocket协议升级和Chrome对证书的限制。同时,文章还介绍了热更新的基本工作原理。
摘要由CSDN通过智能技术生成

背景

无论是开发/测试/生产环境,我司前端项目都需要在相应环境下的账号中心进行登录,登录后账号中心会将jwt保存至localStorage供其他各项目取用。 前端在进行本地开发时可以选择通过注释代码或手动添加有效jwt至localStorage来绕过登录流程,但更推荐的流程是使用代理将线上域名的请求代理至本地devServer,从而保证流程的一致性。 但使用代理始终存在一个问题,就是热更新会失效,每次更新代码后需要手动刷新浏览器查看效果。

现象

使用charles配置map remote,将线上域名下的页面请求代理至本地

此时通过线上域名访问正常,打开控制台发现有报错

首次尝试

那既然有请求失败,那让它成功会不会就能热更新了?

本地devServer默认通过http协议进行交互,那么上面的报错应该是根本就找不到相应服务。那么还是借助charles解决,添加以下map remote规则:

再次刷新页面,发现错误变了

<
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值