H5本地代理远程服务器

一.安装whistle

npm install whistle -g

二.打开CMD命令行工具执行以下代码

w2 start

 

 

 三.在手机上链接上面的wifi或电脑分享出来的热点,进入wifi设置,进入配置代理

1.点手动配置

2.服务器为上面的 192.xx.xx.xx

3.端口号配置为 8899

四.在浏览器中访问上面红框中的地址进入whistle主界面

 

 在这里可以抓取到移动端H5访问的数据----------------------抓包

五.点击rules进入配置代理规则页面

 

 六.点击creat创建一个代理规则

 

 如上图所示创建一个代理规则，前面的为服务器项目包资源文件夹，后面的为本地资源文件夹。这样我们在移动端访问服务器资源时，就做到了用本地资源代理服务器资源。可以理解为用本地资源代替服务器资源访问。

七.注意事项

以上方法只遵循访问HTTP协议的资源，若要访问HTTPS协议的资源，我们还需要认证。

在手机的配置代理中我们需要打开  认证 按钮，输入用户名和密码即可代理。

八.tips  手机调试PC端本地前端项目

1.用手机连接电脑连接电脑分享出来的热点，配置手机手动代理，服务器地址为192.168.137.1，端口号为8899（默认）

 

 

 2.将PC端本地跑起来的项目IP改为上面红框中的ip，端口号不要变

 

 

 

 3.通过手机扫码或者手动输入以上地址即可在移动端访问