Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上

本文目的

• 移动端访问自定义的域名,跳转到本地服务上.
• 如下gif图,访问http://baidu.com/跳转到pc端启动的服务上.正常情况下访问http://baidu.com/会真的跳转到百度
  
  

需求来源

• 在进行微信网页开发时,常常需要在真机微信上测试效果.但是微信上访问ip会有如下图提示,变为手机预览模式,不能测试微信JsSdk(调用微信硬件)功能.
• 所以需要访问一个域名,让域名映射到本地ip上.之前推荐过几款内外网穿透工具效果不是很理想,主要是访问太慢
  
  

开始配置

在80端口下启动一个服务

本文以tomcat服务器为例,也可以使用其他服务器.如nginx.目的就是在pc端启动一个服务用来测试/演示，不了解tomcat基本操作,可以看这里.

• 在tomcat\webapps\ROOT目录下新建一个index.html,内容如下图
  
  

  
  
  


    
首页

• 编辑tomcat\conf目录下的server.xml文件.把tomcat端口改为80.如下图
  

  

• 点击tomcat\bin目录下的startup.bat启动tomcat
  

  

• 浏览器访问http://localhost:80/能打开页面,说明启动成功

• 访问地址不加端口,浏览器会默认访问80端口,所以访问http://localhost/也行
• localhost对应的ip是127.0.0.1.所以访问http://127.0.0.1/也行

自定义域名

• 找到C:\Windows\System32\drivers\etc目录下的hosts文件.如下图
  

  

• 用文本编辑器打开hosts文件并在内容末尾添加127.0.0.1 baidu.com.此句的意思是访问baidu.com跳转到127.0.0.1这个ip上.
  

  

• 在上一步已经启动了一个服务在127.0.0.1.所以此时可以用http://baidu.com/访问到页面,如下图.至此自定义的域名已经可以跳转到本地服务上.
  

  

手机访问

• 让手机和电脑连接同一网络(如都连公司网络或同一个路由器),然后访问http://baidu.com/.发现无法访问.访问的是真百度
• 因为我们的baidu.com是配置在pc端.手机上网根本不经过pc端.
• 如何让手机上网经过pc端?这里需要一个工具——Fiddler

使用Fiddler

• 去Fiddler下载页下载Fiddler.如下图随便填一个原因和电子邮箱.点击下载

如果无法下载或下载慢可以去CSDN下载.csdn下载需要2分,现在没有0分选项了

• 下载完并安装,打开安装目录下的Fiddler.exe运行
  

  

• 打开Tools>Options界面.勾选allow remote computers to connect(允许远程连接),点击确定后,重启Fiddler.如下gif图

远程监听端口为8888
记得修改完成一定要重启

使用Charles

• 由于系统升级到win10，Fiddler折腾半天也用不了，于是就找了Charles使用，也非常简单
• 去Charles下载页下载Charles.官网下载可以免费试用一个月。可以去CSDN下载破解版
• Charles默认代理8888端口和Fiddler一样
  
  
• 如果只想抓手机包不想抓pc端，可以把下面勾去掉
  
  
• 手机第一次配置，会弹出如下图，点击Allow
  
  
• 注意：wi10系统一定要关闭防火墙，win7我记得不需要
  
  

手机配置

• 手机和pc连接同一网络

• 查看pc端ip,我的是88.128.18.144如下gif
  

  

• 使用命令ipconfig查看pc端ip
  

  

• 在手机wifi设置中设置代理. 代理主机名为pc的ip地址.我的是88.128.18.144.设置端口为8888.设置完成在手机浏览器访问http://baidu.com/即可访问到期望的页面.说明Fiddler代理生效了.

如果浏览器打开的还是真的百度].请在浏览器设置中清除浏览器缓存

• 如果使用Fiddler，此时可以从Fiddler面板中,看到所有移动端的请求,这个面板类似chrome开发这工具中的Network面板.
  

  

• 如果使用Charles,如下图可以看到手机网络请求
  

  

• 至此,我们移动端访问自定义的域名,跳转到本地服务上的目标已经达到

有人说修改手机的hosts也可以.但是修改手机hosts文件需要获取Root权限.

我的实际应用

用ionic开发微信公众号在真机微信上测试
关于ionic微信公众号开发可以看这里

• 启动app在80端口ionic serve --port 80
  

  

• 修改js安全域名.注意是两个地方

  
  
  

• 先在微信开发工具上测试.

  
  
  

• 在真机微信上测试.记得Fiddler启动
  

  

其他

• Fiddler官网教程
• Charles使用参考
• 关于mac，Fiddler没有mac版本.所以用Charles，mac修改hosts文件也需要一款工具——Gas Mask， 这两款工具怎么用需要自己百度,我没有尝试