whistle安装 及 代理等配置，注入资源更改接口等场景使用

随意_
1,083 阅读4分钟

背景

我们前端代理 经常使用的是 webpack 或者vite的 devServer proxy来代理本地开发， 最近被安利了whistle，此不仅仅可以设置代理，也可以进行抓包分析，手机端抓包等等，下面就介绍下whistle的安装配置 及场景

文档地址

安装

安装并启动

whistle是基于 node的 所以你要先下载 node并全局安装 whistle

npm install -g whistle  // 全局安装
w2 start // 启动whistle

此时启动成功则展示

image.png

我们打开对应的链接 http://127.0.0.1:8899/ 即可打开 whistle的配置页面

image.png

image.png

安装https证书

image.png

image.png

下载并双击运行

image.png

image.png

image.png

image.png

image.png

image.png

谷歌浏览器为例 安装 proxy SwitchyOmega 插件

你可以谷歌浏览器插件安装(科学上网)，也可以解压完成后 手动安装，手动安装下载地址如下 插件地址

image.png 下载解压后 导入谷歌浏览器插件即可 ，导入成功

image.png

proxy SwitchyOmega 插件 设置代理

image.png

设置代理配置 这里就whistle 的启动代理地址

image.png

应用代理

image.png

应用此配置

点击浏览器的插件 ，你可以固定此插件到标签栏，选择 whistle运行（没有出来的话 多点击几次 或者重启电脑浏览器）

image.png

配置成功 抓包测试

此时我们都配置成功了，现在我们使用 whistle插件，所有的浏览器访问 都会经过我们的 启动的 whistle服务地址 127.0.0.1：8899进行转发， 我们可以在浏览器打开http://baidu.com ，看下是否能抓包,

image.png

使用场景

1前端跨域处理

简单写一个后端模拟接口 我们后端端口在3000， 写个模拟接口

const express = require('express');
const app = express();

app.get('/list', (req, res) => {
  res.send({
    code:200,
    data: [
      {id: 1, name: 'apple'},
      {id: 2, name: 'banana'},
      {id: 3, name: 'orange'}
    ]
  });
});

app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

查看本地的ip 打开此接口 如我得本地IP和接口地址如下 http://10.56.181.203:3000/list 打开可以显示接口数据

image.png

你可以 cmd ipconfig查看本地ip

如果我们的前端服务地址是 5173端口，请求这个地址就会跨域

<template>
  <div>
    <h1>用户信息</h1>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const user = ref(null);

onMounted(async () => {
  try {
    const response = await fetch('http://127.0.0.1:3000/list');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
    // 可以在这里将数据赋值给 user 变量
    // user.value = data;
  } catch (error) {
    console.error('请求出错:', error);
  }
});
</script>

image.png

我们打开 http://127.0.0.1:8899/#rules面板配置

http://10.56.181.203:3000/list resCors://*   //这是设置了access-control-allow-origin: * 允许跨域

image.png 保存 并且再次执行 刷新页面

image.png

接口已经不再跨域

也可以设置enable，解决跨域

http://10.56.181.203:3000/list resCors://enable

依然可以整个端口设置 而不是某一个接口

http://10.56.181.203:3000 resCors://*

以上介绍了 前端如何利用 whistle解决跨域， 是否比vite webpack更有好些呢，如果不想使用此代理插件了 ，记得点击

image.png

如果上述例子不成功，请打开f12 清空缓存并硬性加载

2更改接口返回 使用本地文件 mock数据

我们可以增加配置 如上方的接口地址 我们配置 返回的结果可以是自己自定义本地文件 如下

image.png

将此接口的返回数据 改为自己本地自定义的文件格式

http://10.56.181.203:3000/list C:\Users\Administrator\Desktop\wh\test.json

重新请求接口看返回如下，这是我自己本地的json文件，基于此我们可以进行自定义的mock数据

image.png

3替换线上的文件，本地文件替换线上环境

加入我们有一个文件上线报错，我们无法线上调试，可以将线上的文件 替换为本地文件，在本地调试

如既可以找任何一个线上的js 替换为本地js 我找的是百度地址的任意一js，我们本地创建一个 alert

image.png

https://pss.bdstatic.com/static/superman/js/lib/esl-d776bfb1aa.js C:\Users\Administrator\Desktop\wh\test.js

image.png

可以看到 线上的js已经替换为本地的 你可以修复查找问题

4线上环境注入本地资源

我们可以为线上环境注入资源 如我们注入本地的css 改变线上的地址，可以本地开发 线上的时候直接看效果，方便生产环境部署 为百度诸如一个css 颜色设置为绿色

//color.css

*{
    color: green!important;
}

https://www.baidu.com css:///Users\Administrator\Desktop\wh\color.css

image.png

5请求转发

跟场景1效果类同 可以做代理转发 也可以做IP转发 我访问http://aaa.com 会被转发到 http://www.baidu.com,可借助此实现跨域代理

http://aaa.com http://www.baidu.com

image.png

6线上环境注入代码 如移动端注入 vconsole

首先 values 创建引入及执行的代码段

vconsle.js是源码

newconsole.js实例化

new VConsole();

image.png

rules做如下配置

https://www.baidu.com jsPrepend://{vconsole.js} # 本地引入
https://www.baidu.com jsPrepend://{newconsole.js} # 实例化

执行 可以看见 我给百度增加了 vconsole

image.png

image.png

借助此你可以很方便的调试线上及移动端

7打印日志 利用抓包调试请求

出了上面的注入vconsole 我们可以开启日志功能 我们可以在whistle看见所有的请求，也起到了线上移动端调试功能

https://www.baidu.com log://

可在newwork查看到 请求 console也可以打印出来

image.png

image.png

总结

我们介绍了如何安装 whistle 特介绍了使用场景，如设置代理 诸如资源等等，

avatar
文章
阅读
粉丝