charles开发环境做代理:本地前端环境使用线上接口 && 代理后webpack热更新失效问题

最近在开发的一个项目,因为后端一些原因,在本地环境不能请求到测试环境的接口.
导致开发前端项目还需要在本机起一个后端的java服务,很是麻烦.作为一个有追求的程序员(搬运工),这哪能忍?
其实这个说到底还是跨域的问题,后来想到用charles做代理解决问题.
想法是:
请求 https://myhost下的静态资源时,用charles重写到http://localhost:8089.
1、因为要代理的地址是https的,首先需要给charles安装ssl证书,具体步骤见上一篇文章安装ssl.
2、然后打开tools -> rewrite配置重写规则
3、图中A区域的规则表示哪些路径要走重写,B区域表示重写的规则,我这里直接为/*表示所有路径

4、重写的规则如下:
因为线上的静态资源有hash值,而本地资源是没有带hash的,而且二者资源相对路径也不太一样,所以用正则的分组匹配一下:
如https://myhost/static/js/app.ae3fd2jmh2.js -> http://localhost:8089/app.js:

还有https://myhost/11.js -> http://localhost:8089/11.js:

到这里,先运行本地项目在8089端口,然后在本地代码加一个debug断点.然后访问https://myhost.com发现走到了断点,则说明已经代理成功了,但是看到了报错:

GET https://myhost:8089/sockjs-node/info?t=1646743597862 net::ERR_TUNNEL_CONNECTION_FAILED

这是热更新的报错,因为热更新请求的地址会默认使用当前的host也就是myhost,但是现在是在开发环境,这当然不对啦,应该是localhost:8089才对.但怎么去改这个值呢,不同版本的webpack-dev-server改的方式不太一样.因为我的项目用的webpack-dev-server版本是2.11.2比较老,没有提供host修改的配置,所以只能去node_modules找到源码修改:
node_modules/webpack-dev-server/client/index.js文件

// 修改前
var socketUrl = url.format({
  protocol: protocol,
  auth: urlParts.auth,
  hostname: hostname,
  port: urlParts.port,
  pathname: urlParts.path == null || urlParts.path === '/' ? '/sockjs-node' : urlParts.path
});

// 修改后
var socketUrl = url.format({
  protocol: 'http',
  auth: urlParts.auth,
  hostname: 'localhost',
  port: urlParts.port,
  pathname: urlParts.path == null || urlParts.path === '/' ? '/sockjs-node' : urlParts.path
});

然后刷新浏览器,修改代码,会发现热更新已经生效了.