前端开发代理配置

代理配置

Whistle作为一个开发调试工具，可以帮助开发人员解决很多问题，诸如：跨域、环境配置不同等等。

代理的原理

Whistle

详细配置，可以参考

安装

Whistle基于Node.js。需要先安装Node.js(版本需要大于10.0)

npm install -g whistle

启动命令

启动 whistle start

重启 w2 restart（可以直接用这个启动）

访问

http://127.0.0.1:8899/

Rule

配置Rule，这是比较重要的一步，目的就是为了把，访问某一个特定域名的请求拦截转发到本地服务器。

访问，http://127.0.0.1:8899/#rules，配置如下。

规则有很多种配置方式

1.精确匹配

说明：当访问http://ltzero.com/test/js/app.js时，会被代理服务器转发至http://127.0.0.1:8080/test/js/app.js

示例1

http://ltzero.com/test/js/app.js http://127.0.0.1:8080/test/js/app.js

2.正则匹配

示例2

# 以 / 开头  / 结尾
/http://ltzero.com/test/js/(.*\.(js))/ http://127.0.0.1:8080/test/js/$1

$1为占位符，可以拿到前面通过正则匹配到的第一个结果。
此正则配置，包含了上面的示例1

3.通配符匹配

示例3

# 以 ^ 开头
^ltzero.com/test/*** http://127.0.0.1:8080/$1

4…

更多匹配规则，参考官方配置规则

SwitchyOmega

Chrome使用的代理配置扩展工具。

1.新建情景模式

代理服务器 -> 代理协议，这个下拉选择框选择 HTTP，将 example.com 改为 127.0.0.1，将 80 改为 8899

2.切换浏览器的 Proxy SwitchyOmega

电脑代理

电脑配置全局代理后，所有应用都会走代理。

Win10配置全局代理

win键->设置->网络和Internet->代理->手动设置代理。

地址127.0.0.1，端口8899

Mac

官方地址

手机代理

手机配置代理后，所有的应用请求，都会走代理。

设置wifi代理->手动,电脑的内网IP10.1.10.133，端口8899