4

1、浏览器代理

安装浏览器插件Proxy SwitchyOmega ,用于切换代理设置。

image.png

配置完成,点击“应用选项”,然后打开这个插件,选择"whistle"情景模式。

2、代理服务器

安装whistle,用于启动本地代理服务,方便代理配置。

启动代理:

w2 start -p 8000

(ps:为什么是8000端口,因为有时候需要用手机端代理到这个服务,如果使用默认的8080可能会出现抓不到包的情况)

配置Rules:

# --- 本地前端页面开发联调 ---
# 1、测试环境接口
/^http:\/\/127\.0\.0\.1:8081\/mobile\/(.*)/  https://test-online-site.com/mobile/$1
# 2、生产环境接口
# /^http:\/\/127\.0\.0\.1:8081\/mobile\/(.*)/  https://online-site/mobile/$1

# --- 线上环境调试本地页面 ---
# 仅把请求代理到本地服务,其他资源仍是线上的
# 1、测试环境
# /^https?:\/\/test-online-site\.com\/(?!mobile)(.*)/  http://127.0.0.1:8080/$1/$2
# 2、生产环境
# /^https?:\/\/online-site\.com\/(?!mobile)(.*)/  http://127.0.0.1:8080/$1/$2

把你需要的配置打开注释。注意路径改成你需要的。

这时候浏览器的请求会在这个服务上中转,在 http://localhost:8000/ 直接能看到所有请求的详细信息。

3、本地运行前端服务

把你需要调试的本地服务先跑起来。然后:

如果是情况1(本地前端页面开发联调),那么浏览器打开的是你本地服务的地址,一般是localhost。

如果是情况2(线上环境调试本地页面),那么浏览器打开的是线上地址。


chenyunqing
255 声望15 粉丝