本地代理之whistle

821 阅读1分钟

一.安装whistle

npm install whistle -g

二.启动whistle

打开命令终端,输入以下内容,回车

w2 start

84bb5143eb34db7121a00f722f41221.png

三.在手机上配置代理服务器IP和端口

在手机设置中找到WIFI设置,并手动配置IP、端口为图片中的IP和端口。

四.访问whistle主页面

1.复制终端中的地址到浏览器访问

2.在主界面中可以抓取手机访问的内容 d46a4e3dc2cb0b84fc5eca849ea1141.png

五.配置代理规则

1.点击rules进入代理规则页面

2.点击creat,在输入框中输入代理名称(自定义)

3.按照下图中配置代理规则,前面的为服务器项目包资源文件夹后面的为本地资源文件夹。这样我们在移动端访问服务器资源时,就做到了用本地资源代理服务器资源。可以理解为用本地资源代替服务器资源访问。 d27a1735f022642ded3d61e53a470cb.png

六.注意事项

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

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

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

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

720b740ecacba735c5e5b73dee392ff.png

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

54a0026faa3bd8ef6b193a94b44fa71.png

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

dc028fd98b2a6d060b5fdf6543cef06.png