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

2023-12-29 15:28:44

使用 Charles 将页面请求代理到本地 DevServer 后，热更新失效？手把手解决

厌倦了使用 Charles 将页面请求代理到本地 DevServer 却发现热更新失效的烦恼吗？别担心，本文将为您提供一步步的解决方案，让您轻松搞定这一问题。

为何会出现热更新失效？

在使用 Charles 代理页面请求时，它会创建一个本地服务器，用于拦截和修改请求。不幸的是，这会中断 webpack DevServer 的 Websocket 连接，导致热更新失效。

解决方案

1. 添加排除规则

在 Charles 中，添加一个排除规则，将 /webpack-dev-server/ 以及其他热更新相关请求排除在外。这将确保这些请求直接发送到 DevServer，不受 Charles 代理的影响。

2. 启用 WebSockets 代理

在 Charles 的“Proxy”设置中，勾选“Enable WebSockets proxying”。这将允许 Charles 代理 WebSockets 连接，从而恢复热更新功能。

3. 使用 --disable-host-check 标志

在启动 webpack DevServer 时，添加 --disable-host-check 标志。这将告诉 DevServer 忽略请求来源，允许 Charles 代理请求。

4. 启用自动刷新

在 Charles 的“Tools”菜单中，勾选“自动刷新”。这将使 Charles 在检测到任何更改时自动刷新页面，即使没有热更新。

5. 检查代理设置

确保 Charles 已正确配置为将请求代理到本地 DevServer。检查您的代理设置并确保 URL 和端口正确。

具体步骤

打开 Charles 并添加以下排除规则：http://localhost:*/webpack-dev-server/*
启用 WebSockets 代理：Proxy -> Enable WebSockets proxying
使用 --disable-host-check 标志启动 DevServer：npx webpack serve --disable-host-check
启用自动刷新：Tools -> Auto-refresh
检查代理设置：Proxy -> HTTP Proxy，确保目标 URL 为本地 DevServer 地址（例如：http://localhost:8080）