whistle+switchyOmega配置web代理

首先安装whistle这个代理软件:

// 首先要安装node 自行去官网下载安装 此处跳过
// 使用npm全局安装whistle
npm i -g whistle

安装成功后启动whistle:

w2 start

启动成功出现以下打印内容:

whistle启动在localhost:8899端口,在浏览器输入localhost:8899即可访问whistle配置页面:

输入aaa.com http://127.0.0.1:8080即可将aaa.com代理到本地8080端口

到这里只是配置好了whistle的rules,浏览器输入aaa.com是啥也没有的,我们需要安装一个浏览器插件:switchyOmega,然后点击右上角小圆圈配置:

将不代理的地址列表清空然后配置代理服务器为whistle,然后在页面上点击小圆圈选择代理模式为刚刚设置的proxy即可

此时访问aaa.com就会代理到本地8080端口了 ^_^

tips:如果要代理https则需要在whistle配置https证书,否则只能代理http

2024/3/27 谷歌浏览器跨域配置记录:

坑点: 浏览器发送跨域请求时会先发送一个预检请求(OPTIONS 请求)到服务器端, 服务器需要返回一个 Http 状态码: OK(200)告诉浏览器我允许这次跨域请求

对应到whistle 上的rule就是:

*.xxx.com resCors://* replaceStatus://200 # cors

resCors 用来配置跨域的选项,官方usage如下:

# `*` 表示设置 access-control-allow-origin: *
www.example.com resCors://*

#  `enable` 表示设置 access-control-allow-origin: http://originHost
# 及access-control-allow-credentials: true
# 可用于script标签上设置为 `crossorigin=use-credentials`的情形
www.example.com resCors://enable
# 或
www.example.com resCors://use-credentials

 *和 enable 的区别就是发送跨域请求是否需要携带凭据, enable就是开启使用凭据, 如果开启发送凭据 origin: *就会失效, 因为携带凭据 cookie 需要确定唯一的 domain 来源

然而关键点在于这一句:

replaceStatus://200

whistle 处理预检请求会有问题, 只配置 resCors 会导致预检不通过浏览器报错:

Access to XMLHttpRequest at xxx from origin xxx has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

意思就是预检请求未正常返回 http 状态码 OK(200) ,在 whistle 的 network 请求里看到的效果就是请求 403 了

 response的请求体显示非法跨域请求:

 一开始用的 statusCode 搭配组合各种不生效 后来又用 replaceCode 一顿搭配才成功,不求甚解的我继续深入了一下原因,whistle 文档这么解释:

也就是说 statusCode 请求压根都没发到服务器就返回了 200, 而 replaceStatus 是请求响应回来后拦截再修改 status 的, 所以后者生效...

特此记录, 捣鼓了半天...