2021.11.23 星期二 10:11

https 请求代理

工具栏 https 选项：
1）证书安装
2）勾选 Capture TUNNEL CONNECTs
<!–

证书安装

Whistle 配置 https 抓包
$_PS: windows，mac, android
whistle允许https
$_PS: mac 简单直接教程
–>

接口mock

Values 值

1）在 Rules 中新建规则;
2）在 Values 中新建mock数据。

1 2	/api.m.xxx.com/client.action.functionId=order_list_m/i resBody://{order_list_m.json} /api.m.xx.com/client.action.functionId=order_detail_m/i resBody://{order_detail_m.json} statusCode://200

其他数据

PS: 以下未验证，上面的resBody 可以成功。

更多配置：
resCors://enable

## Rules
/apinew.juejin.im/interact_api/i reqCookies://{reqcookie}
/apinew.juejin.im/interact_api/i resCookies://{resCookies.json}
## Values
### reqcookie
name: 'Gopal'
like: 'FE'
### resCookies.json
{
    "name": "Feng",
    "age": "26",
    "happy": {
        "value": "FE",
        "maxAge": 60,
        "httpOnly": true,
        "path": "/",
        "secure": true
    }
}

本地文件

通过上面提到的 file:// 协议，我们就可以 Mock 数据，当然你如果不想使用 Values 中的值，也可以使用本地的文件，类似如下的配置：
/v1/article/recommend_all_feed/i file:///Users/gpingfeng/Documents/Personal/Test/juejinList.json
<!–
PS: 存在跨域问题。

跨域

可以通过 reqCors 修改请求的 CORS。也可以通过 resCors 修改返回的 CORS 。从而达到解决跨域的效果。上面的例子已经演示过，这里不再重复
(PS:cors.json)

PS: 下面方式接口跨域了请求不同。

## Rules
/api.m.xxx.com/client.action.*functionId=order_list_m/i file://{order_list_m.json}
/api.m.xxx.com/client.action.*functionId=order_list_m/i resCors://{cors.json}
## Values
origin: https://xxx.m.jd.com
``` -->
<!-- END:#33-->
<!-- 
\# 34 [Whistle mock 配置](https://wayou.github.io/2020/09/21/Whistle-mock-%E9%85%8D%E7%BD%AE/)
resCors://* 表示设置 access-control-allow-origin: *，在启用 credential 的情况下是不行的，所以此处使用 resCors://enable：

文件的方式：在 Values 面板创建变量 CORSHeaders 内容为：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers,X-Requested-With,X-Custom-Headers
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Allow-Origin: some_domain
Content-Type: application/json

同时更新 Whistle 转发规则使用该变量：

http://some/api resHeaders://{CORSHeaders} vase://sample_json

直接在规则中配置 cors

originHost

及access-control-allow-credentials: true

可用于script标签上设置为 `crossorigin=use-credentials`的情形

https://some/api resCors://enable vase://sample_json

<!-- END#34-->


## 跨域设置
<!-- [用 whistle 解决跨域请求问题](https://juejin.cn/post/6844904137457565710) 
pattern 可以为域名、路径、通配符、正则等，详细内容参见：[匹配模式](https://wproxy.org/whistle/pattern.html) 
-->

```sh
# rules配置
## 1 通配符
www.qq.com/test resCors://*
## 2 自动设置
www.qq.com/test resCors://enable # 或 pattern resCors://use-credentials
## 3 自定义
pattern resCors://(origin=xx&mehods=POST&headers=x-test)
#### 例如（用 whistle 的 Composer 模拟请求）：
www.qq.com/test resCors://{test-cors1}
``` test-cors1
origin: *
methods: POST
headers: x-test
credentials: true
maxAge: 300000
\

一般如果是静态资源设置 resCors://* 即可，CGI请求的话可以设置 resCors://enable，如果是对请求响应的cors头有特殊要求再用自定义方式，更多内容参见[帮助文档](https://wproxy.org/whistle/pattern.html)


## 缓存
清空请求缓存。
<!-- [用whistle清除js和css缓存](https://juejin.cn/post/6844903735081205774)
[用whistle清除js和css缓存](https://codeantenna.com/a/EcPSrT3J4O)
[用whistle清除js和css缓存](https://blog.csdn.net/weixin_34365635/article/details/88019956)
[用whistle清除js和css缓存](https://cnodejs.org/topic/5c0f2c197ec239239ff55945) -->

最后，回顾下用whistle清除页面静态资源缓存的方式：
1) 禁用页面 304 及缓存头：disable://cache
2) 通过正则替换给页面里面的静态资源链接加随机参数：resReplace
```sh
# rules
www.baidu.com/index.html disable://cache
www.baidu.com/index.html disable://cache resReplace://`{replace}`

\```replace
/\.(js|css)(['"])/g: .$1?test=${now}$2
\

`
resReplace: http://wproxy.org/whistle/rules/resReplace.html
pattern resReplace://filepath
filepath为Values里面的{key}或者本地文件