本文目的
- 移动端访问自定义的域名,跳转到本地服务上.
- 如下gif图,访问
http://baidu.com/跳转到pc端启动的服务上.正常情况下访问http://baidu.com/会真的跳转到百度
需求来源
- 在进行微信网页开发时,常常需要在真机微信上测试效果.但是微信上访问ip会有如下图提示,变为手机预览模式,不能测试微信JsSdk(调用微信硬件)功能.
- 所以需要访问一个域名,让域名映射到本地ip上.之前推荐过几款内外网穿透工具效果不是很理想,主要是访问太慢
开始配置
在80端口下启动一个服务
本文以tomcat服务器为例,也可以使用其他服务器.如nginx.目的就是在pc端启动一个服务用来测试/演示，不了解tomcat基本操作,可以看这里.
- 在tomcat
\webapps\ROOT目录下新建一个index.html,内容如下图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<h1>首页<h1>
</body>
</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， 这两款工具怎么用需要自己百度,我没有尝试
网友评论