h5端登录是什么意思_如何让电脑端配置的host在手机端生效（MVVM项目开发测试）...

如何让电脑端配置的host在手机端生效

1.电脑上安装node版本不要太老

下载地址：

安装完成后验证命令 ：node -v

2.安装全局whistle

安装命令：npm install whistle –g

安装完成后验证命令：npm whistle –v

验证完成后启动：w2 start

启动完成后，在chrome浏览器中访问http://127.0.0.1:8899，看到类似如下界面，好了，这里就是你可以配置host的地方了。

3.在chrome浏览器中安装Proxy SwitchyOmega插件

安装流程：chrome浏览器->右上角三个点->更多工具->扩展程序->打开chrome网上应用店

或者直接输入此网址：

https://chrome.google.com/webstore/category/extensions?hl=zh-CN

搜索“Proxy SwitchyOmega”，添加至chrome

4.配置好Proxy SwitchyOmega即可配合whistle一起使用。

在chrome里点开Proxy SwitchyOmega插件->选择选项

上面的步骤进入到相应的页面后->添加情景模式->设置代理服务器和端口

代理服务器设置为：127.0.0.1

端口设置为：8899

设置好以后，点击Proxy SwitchyOmega插件，切换到自己创建的这个模式。

5.电脑端安装猎豹wifi或者其他wifi，wifi的安装后开启了可能会导致自己的电脑网络容易断网，可以申请相应的权限解决此问题。也可以强制让自己的电脑安装上，强制开启，猎豹wifi还是很强大的。如果你的wifi安装成功后，手机连不上wifi，尝试做如下操作：

控制面板->windows防火墙->高级设置->入站规则->新建规则，后面的流程按照截图选择，其他就按照默认选择，规则名自定义取一个就行。

6.开启wifi，拿出手机，连接自己的电脑wifi。连接好以后，还需要在手机端做相应的配置。

点击网络右侧的感叹号

http代理设置手动，服务器和端口号从前面打开的http://127.0.0.1:8899网页里找。

网页右上角online点击一下，便是上图需要填写的服务器ip和端口

6.好了，如上，在http://127.0.0.1:8899网页中的rules里配置相应的规则：如host等，勾选规则，即可在手机端生效了。手机端访问，在网页network里即可查看拦截请求。

7.如果要拦截https的请求，还需要在电脑和手机中安装证书。

安装流程如下：

电脑端：https->下载->安装，按照提示走

手机端：safri或者其他浏览器->输入http://rootca.pro网址->安装，按照提示走

最后将拦截https的选项勾选上，此时，手机访问任何网站的请求，都可以在电脑端被拦截。同时电脑端设置的host等规则也可以在手机端生效。

写到最后

1. 如果你的电脑按照如上步骤配置了，还是在whistle抓不到手机访问页面的包。那么 增加你的端口就好了

2. 如果你只是抓http的包就不用安装证书https的证书

---

DEMO

测试环境测试

1. 电脑上配置HOST 后端与前端HOST看情况配置。（启动whislt,开启代理，配置HOST）

2. 电脑开启猎豹WIFI

3. 手机连接自己电脑的wifi，（保证你连接的WIFI发射的电脑配置了你想要的HOST 就可以 ）

4. 手机连接WIFI，配置手动代理。代理IP和端口为 whistle 右侧online 的 192.168.191.1 端口为8899

5. 电脑上访问你要看的M端页面。生成一个二维码手机访问即可。

特殊场景，手机连接不上PC的WIFI热点时。PC抓不到手机上的包时。请注意

1、PC上打开防火墙，高级设置。里面有入站规则和出站规则。然后开通你手机上用的端口即可。有的电脑就是需要开一下。

注意：

手机通过电脑配置HOST ：

1，测试使用，无需实时访问。 固只配置HOST（前端HOST，后端HOST） 在电脑上。然后用猎豹WIFI连上同一个局域网，并设置代理为192.168.191.1 端口为8899。 即可在手机上生效电脑配置的HOST

2. 开发使用， 需实时访问。 固只配置HOST（前端HOST，改为资源路径指向本地，在配置后端HOST即可） 在电脑上。然后用猎豹WIFI连上同一个局域网，并设置代理为192.168.191.1 端口为8899。 即可在手机上生效电脑配置的HOST，并且 一边修改，一边手机看效果。

3. 注意，https时，需要手机上安装whislte的证书。

最方便的方法，无需热点，服务端whislte，让HOST即刻在手机上生效

1. 服务端wihisle无需开热点。直接让电脑上 的HOST在手机上生效

连入公司内网，然后配置服务端whislte的代理和端口即可。

小程序中H5项目的测试一：

1. 缓存问题，需要退出重新登录微信帐号，删除小程序并不能清除缓存
2. 安卓机器进入小程序空白问题（在配置了HOST后），首先确认https的证书，在确认，请求的接口是否是HTTPS的接口，
3. 在手机上配置HOST，可以用热点的方式，连接电脑的WIFI，电脑配置HOST即可
4. 在手机上配置HOST，也可以用服务端WHISTLE的方式（推荐），直接在服务端WHISTLE配置上HOST，然后手机连入公司内网，配置代理为服务端whistle的ip和端口即可

小程序中H5项目的测试二：

最近遇到，H5项目，需要在小程序中测试时，代理的问题

（HOST可以在手机浏览器中生效，但是，在微信中不生效，首先，先排查是不是https需要安装证书的问题）

1. IOS和安卓手机配置代理想在小程序中生效，往往代理不成功，或者是微信的缓存比较严重。实际上也是可以代理的。如果涉及到登录，免密登录就更加繁琐了。

解决方法：

1. 手机连入内网
2. 服务端whistle配置好HOST
3. 手机网络设置服务端whistle的IP 和端口代理
4. 通过H5项目的URL来访问项目即可。（从小程序 中的入口去访问有是可以的）
5. 如果涉及到登录就通过免密串在微信中直接打开URL测试即可。

直接通过服务端whistle

其他

一，chrome解决https无法切换成http的问题

1.地址栏输入： chrome://net-internals/#hsts
2.找到底部 Delete domain security policies一栏，输入想处理的域名，点击delete。

3.搞定了，再次访问http域名不再自动跳转https了

二，注意，例如，支付宝等金融类银行类APP线上包是不允许被抓包的。如果你配置了代理去访问，接口就调用不通了，页面也访问不了了

三， IE浏览器解决https无法切换成http的问题

1，用fiddler代理https成http的

4.手机浏览器输入192.168.191.3:8899(这里我电脑的ip)

能看到以下页面，恭喜你，说明手机设置代理成功，可以开始手机测试了

贴配置

在vue项目中，由于使用require，webpack在打包的时候，会进行js切割，打出0.js，1.js....

一, xSwitch ：直接贴的通用配置，已某项目为例

多去少补，应该会有 多出的代理配置，无用自行删除即可

{
  

二，whistle ： 同样上面的代理用 whistle 来配置如下

//xx.

新增：

一，

_________________________2019/9/3_______________________________

安卓7+，微信7+小程序内部嵌入H5，由于，微信升级到7.0/安卓系统升级等原因，导致无法配置代理的情况 （参考：https://zhuanlan.zhihu.com/p/80965697）

_________________________2019/9/3_______________________________

二，MVVM项目本地开发、调试方案

方案一：

与后端约定一个域名增加入请求白名单，此地址代理为本地服务。然后直接访问即可

127.0

方案二：

用IP的形式本地开发，使用nginx做反向代理。

_____________________________开发自测___________________________________

开发自测，小程序中的H5等场景，让电脑HOST在手机生效

________________________________________________________________

测试Https抓包，与配置到电脑HOST，在手机生效的方式：

0、 电脑打开热点工具 （小米wifi或者猎豹wifi），让手机和电脑同时连入这个同一个无线网段。查看自己的无线网IP，来安装https证书

一、 安装fiddler，电脑fiddler无需安装证书，手机通过

（例如：192.168.123.1：8888 ）

安装Fiddler的证书到手机上。

二、 用Fiddler做代理抓包（在fiddler直接配置HOST，或者在电脑上通过switch等软件配置需要在手机生效的HOST）

三、 手机连接自己的热点后，配置对应的无线热点的IP和HOST作为代理即可

____________________2019-9-18更新______________________

开发自测（小米9手机安卓机器系统9，微信大于7可以在微信小程序中的H5抓HTTPS成功）__________________________________________

1，通过另外一个古老的代理工具 - 青花瓷来代理。需要关掉电脑上打开的HOST软件，否则代理不成功（配置SSL）

2，目前只发现此款安卓机器，是可以在以上这个场景代理成功的。

____________________2019-9-18更新______________________

TIPS:

1. 强大的微信缓存引起的代理问题：通过服务端whistle，配置HOST后，在手机上配置此服务端whitle作为代理后。请求可以抓到，但是静态资源，有的请求， 有的不请求，比如，请求了3.js. 其他的app.js等等都 是走的微信缓存到手机内存里的文件。根本就没有请求。所以，此时，无论你删除了体验版小程序，重新进入，或者退出重新登录微信都无法使静态资源的HOST在手机上生效。唯一的办法就是清楚微信的缓存