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

本文目的

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

需求来源

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

开始配置

在80端口下启动一个服务

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

  • 在tomcat\webapps\ROOT目录下新建一个index.html,内容如下图
    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第3张图片



  
  index.html
  


    

首页

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

    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第4张图片

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

    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第5张图片

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

  • 访问地址不加端口,浏览器会默认访问80端口,所以访问http://localhost/也行
  • localhost对应的ip是127.0.0.1.所以访问http://127.0.0.1/也行
Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第6张图片

Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第7张图片

自定义域名

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

    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第8张图片

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

    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第9张图片

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

    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第10张图片

手机访问

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

使用Fiddler

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

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

Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第11张图片
  • 下载完并安装,打开安装目录下的Fiddler.exe运行

    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第12张图片

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

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

Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第13张图片

Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第14张图片

使用Charles

  • 由于系统升级到win10,Fiddler折腾半天也用不了,于是就找了Charles使用,也非常简单
  • 去Charles下载页下载Charles.官网下载可以免费试用一个月。可以去CSDN下载破解版
  • Charles默认代理8888端口和Fiddler一样
    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第15张图片
  • 如果只想抓手机包不想抓pc端,可以把下面勾去掉
    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第16张图片
  • 手机第一次配置,会弹出如下图,点击Allow
    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第17张图片
  • 注意:wi10系统一定要关闭防火墙,win7我记得不需要
    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第18张图片

手机配置

  • 手机和pc连接同一网络

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

    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第19张图片

  • 使用命令ipconfig查看pc端ip

    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第20张图片

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

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

Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第21张图片

Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第22张图片
  • 如果使用Fiddler,此时可以从Fiddler面板中,看到所有移动端的请求,这个面板类似chrome开发这工具中的Network面板.

    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第23张图片

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

    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第24张图片

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

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

我的实际应用

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

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

    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第25张图片

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


    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第26张图片
  • 先在微信开发工具上测试.


    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第27张图片
  • 在真机微信上测试.记得Fiddler启动

    Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上_第28张图片

其他

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

你可能感兴趣的:(Fiddler/Charles-访问自定义的域名,跳转到本地ip地址上)