把正式域名映射到本地开发服务器

前言

有时候我们会遇到接口需要线上域名才能够调试时，往往都是要上传代码后再构建，去到线上环境看，但一旦要反复修改，就又要重新上传，重新构建，这样操作太烦锁了，所以如果能有一个插件可以反向代理，把正式域名映射到本地开发服务器就好了🤔。
后面终于让我找到一个方法，让我们看看是如何配置的。

whistle简介

基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能。

安装

一、 安装工具whistle

npm install -g whistle

二、 启动whistle

w2 start

三、 安装证书

http://wproxy.org/whistle/webui/https.html

四、 配置代理

http://wproxy.org/whistle/install.html

推荐使用 SwitchyOmega 插件

五、 打开下面的地址

http://127.0.0.1:8899/

六、 访问你配置的域名

代理插件切换到你创建的模式

已经映射到本地开发服务器了

如果访问出现Invalid Host header问题

解决方案：
在vue.config.js或者webpack.dev.conf.js的devServer中添加

disableHostCheck:true

有关文献

前端抓包工具–Whistle： https://zhuanlan.zhihu.com/p/368327057

欢迎关注我的博客： https://blog.csdn.net/weixin_42323607

github地址： https://github.com/NurTuam

多多支持！本人会持续更新哒 ❤️