# whistle
**Repository Path**: lianqi_1/whistle
## Basic Information
- **Project Name**: whistle
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-20
- **Last Updated**: 2024-04-11
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 1. Whistle
https://wproxy.org/whistle/
https://www.jianshu.com/p/dd844bf097a4
https://zhuanlan.zhihu.com/p/562828171?utm_id=0
https://juejin.cn/post/7330151205770412095
https://juejin.cn/post/6844903776910835720?searchId=2024040222530531B5F1568B773C2D3770
https://juejin.cn/post/7288151713373175869?searchId=2024040222530531B5F1568B773C2D3770
ZeroOmega--Proxy Switchy manifest v3 version
https://chromewebstore.google.com/detail/zeroomega-proxy-switchy-m/pfnededegaaopdmhkdmcofjmoldfiped
```bash
npm i whistle -g
w2 start
```
# 2. SwitchyOmega
Chrome 中安装此插件需要[科学上网](http://kingfast.info/index.php/index/register/?yqi=33092)，若不能，可通过[这儿](https://chrome.zzzmh.cn/info/padekgcemlokbadohgkifijomclgjgif)下载。
# 3. Case
## 绑定 host
```bash
# ip 域名 => 把右边域名解析到左边的 IP
127.0.0.1 ifer.com
# 域名转发，访问左边的域名转发到右边
ifer.com jd.com
# 模拟 https
https://ifer.com 127.0.0.1:3000
# Mock 数据
http://192.168.1.6:3000/dataPackage tpl://{mock.json}
```
指定域名开发（可以把线上的资源打到本地，例如登录态；也可以直接使用域名下的资源，不存在跨域限制等）
TODO: 改进下载组织的代码
```bash
https://www.baidu.com 127.0.0.1:51387
127.0.0.1:51387 https://www.baidu.com
```
**1. 转发到本地文件**
```bash
# www.test.cn file://C:\Users\dangp\Desktop\test\index.html
https://www.test.cn C:\Users\dangp\Desktop\test\data.json
```
**2. 通过本地文件调试线上：**线上环境某个文件可能出现问题，可以加载本地 JS 文件进行调试
```js
https://pss.bdstatic.com/r/www/cache/static/search-ui-pc/enhance_f636eb0.js C:\Users\dangp\Desktop\test\a.js
```
a.js
```js
debugger
console.log('~~~~~~')
```
**3. 线上地址转发：**替换为另一个路径（处理跨域）
```bash
https://www.test.cn https://www.jd.com/
```
**4. 注入 HTML、CSS、JS**
```css
https://www.baidu.com css://C:\Users\dangp\Desktop\test\a.css
```
引入 vconsole 进行手机端调试。
```js
https://www.baidu.com jsPrepend://{vConsole.min.js} # 引入源码
https://www.baidu.com jsPrepend://{vconsole.js} # 实例化
# 手机端
# 把上面的 www.baidu.com 换成 m.baidu.com ...
```
Tips：现在 Plugins 里面已经集成了。
**5. whistle 中也打印日志**
```bash
https://www.baidu.com log:// # 在 whistle 中也打印 log
```
## 处理跨域
### 请求接口
第一种处理方式：代理请求地址
> 两者一致：请求的地址和 whistle 代理的地址（测试了，当浏览器访问 https 的本地 IP 时不成功）
`index.html`
```html
Document
Hello
```
`server.js`
```js
const express = require("express");
const app = express();
app.get("/api/users", (req, res) => {
res.send({
msg: "ok",
users: [{ name: "John" }, { name: "Jane" }],
});
});
app.listen(3000, () => console.log("Server is running 3000..."));
```
whistle 配置
```bash
# http://192.168.1.6:3000/api/users resCors://*
http://192.168.1.6:3000/api resCors://*
# http://192.168.1.6:3000 resCors://*
# http://192.168.1.6 resCors://*
```
需要携带 Cookie
```bash
http://10.9.102.242:3000/api/users resCors://enable
# http://10.9.102.242:3000/api/users resCors://use-credentials
```
或者有文件如下操作：
```html
```
```html
http://10.9.102.242:3000/api/users resCors://{test-resCors.json}
```
`test-resCors.json`
```json
origin: *
methods: POST
headers: x-test
credentials: true
maxAge: 300000
```
在 `http://localhost:51387/` 下，在控制台通过 `fetch('https://www.baidu.com')` 请求百度的页面，提示跨域，配置 whistle 如下：
```bash
www.baidu.com resHeaders://* {header}
header => Access-Control-Allow-Origin: *
```
### 其他代理
访问 localhost:3000/http.html
```html
Document
我是假的百度
```
whistle
```bash
www.baidu.com resHeaders://{header}
http://localhost:3000/s www.baidu.com/s
```
第二种处理方式：把请求地址改成当前网站域名
> 三者一致：浏览器的域名，请求的地址，代理的地址
```html
Document
Hello
```
whistle
```bash
https://10.226.38.90:5500/api/users http://10.226.38.90:3000/api/users
```
### 截图操作
前端代码
```html
Document
```
whistle 配置
```bash
* resCors://*
```
## 抓手机包
1\. 同一局域网；
2\. 配置手机网络走电脑的 whistle 代理；
3\. 安装证书（VPN 安装）；
4\. 证书信任设置。
# 4. 路径匹配
```bash
www.test.com/api www.test-dev.com
# 精确匹配，只匹配某个地址
$www.baidu.com/index localhost:3000
***.baidu.com localhost:51387
^www.baidu.com/***/index$ localhost:5138
```
绑定转发：线上 => 本地，本地 => 线上
修改 ua
````js
www.baidu.com ua://{ua}
```ua
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
```
````
修改 referer
```bash
www.baidu.com referer://xxx.baidu.com
```
修改请求头
```bash
www.baidu.com reqHeaders://{header}
```
修改响应
跨域
负载均衡 => 反向
往 HTML 中追加标签（script、style or normal html tag）
```js
w2 i whistle.inspect
www.baidu.com whistle.inspect://v
www.baidu.com whistle.inspect://vConsole
https://wproxy.org/whistle/plugins.html
www.baidu.com htmlBody://{bodycss}
```
追加 JS
````js
# 自动用 script 包裹
www.baidu.com js://{env.js}
# 抢月饼
www.baidu.com js://{aaa}
```aaa
alert(1)
```
````
追加 CSS
```js
# 自动用 style 包裹
www.baidu.com css://{css-test}
```
替换响应的某些字符串
```js
www.baidu.com resReplace://{xxx}
```
```js
// 直接替换内容
www.baidu.com resBody://{aaa}
```aaa
xxx
``
```
````js
www.baidu.com htmlPrepend://{aaa}
```aaa
alert(1)
```
````
````html
http://127.0.0.1:51387/ resReplace://{re}
```re
100: 100000000000
```
````
# 5. 代码测试
```yaml
# 1. 启动本地项目
# 2. 打到本地，配置 whistle
xxx.yyy.net/login localhost:9528
# 3. 删除本地 vue.config.js，重启项目，继续访问线上地址
# {
# 'proxy': {
# 'api': {
# target: 'https://xxx.yyy.net'
# }
# }
# }
# 4. 点击登录 404，例如请求 /api/user，其实是 xxx.yyy.net/api/user，而 xxx.yyy.net 代理到了本地 localhost:9528，所以最终请求的是 localhost:9528/api/user，所以 404
# 5. 继续配置 whistle，表示这个请求不会打到本地啦
xxx.yyy.net/api ignore://*
# 6. 处理图片不正常显示的问题
# xxx.yyy.net/defaultHead.png ignore://*
# xxx.yyy.net/***.png ignore://*
# 7. 热更新失效的问题，配置 vue.config.js devSserver 的 disableHostCheck:true，重启
```
`.whistle.js`
```js
exports.name = 'xxx 项目'
exports.rules = `一堆规则`
然后通过 w2 add # 加入规则到 whistle rules
```
# 6. Mock
```bash
/list {list}
```