使用whistle和switchyomega工具

whistle的使用

基于Node实现的跨平台web调试代理工具,可以使用npm全局安装
npm install -g whistle
关于代理的使用

启动默认代理

w2 start --init
启动的默认代理端口是8899，成功后就可以在 http://local.whistlejs.com 地址中打开whistle的配置。

在rules设置代理的匹配规则

image.png
在network中可以查看全局网络请求状态
image.png

通过改变端口启动项目

改变端口w2 start -p 1989
设置全局代理 w2 proxy

注意：通过默认start —init启动，可以直接代理全局。但是如果想改变端口启动，一定要执行w2 proxy设置全局代理。

switchyomega的使用

Proxy SwitchyOmega 是一款非常优秀的浏览器插件.

下载插件

Proxy SwitchyOmega 下载安装非常简单，除了通过 Chrome 应用商店安装之外，还可以直接访问官方网站下载相应的版本，网址为：https://proxy-switchyomega.com/download/，下载完成后，插件会被自动安装到浏览器扩展程序中
image.png
安装完成后，将管理工具固定在浏览器地址栏的右侧，以方便后续使用。如下图所示
image.png

安装完成后设置代理模式

image.png
第3步是将不代理列表清空即可。

工作原理

默认不使用switchyomega的情况下，浏览器把接口请求直接发送到互联网中
接口代理 - 图6
通过添加switchyomega，可以到达转发效果
接口代理 - 图7

使用lightproxy替代whistle

由于lightproxy的默认端口是12888，需要设置switchyomega的转发

Snipaste_2022-06-11_17-30-23.jpg

在vue项目中的vue.config.js需要设置对应的代理

  1. '/api': {
  2.   target: process.env.VUE_APP_APIPROXY || 'http://localhost:12888/',
  3.   pathRewrite: { '^/api': '/api' },
  4.   changeOrigin: true, // target是域名的话，需要这个参数，
  5.   secure: true, // 设置支持https协议的代理
  6. },

在lightproxy中设置rules

  1. # 定义域名代理
  2. # http://test.testbook.com http://www.baidu.com
  4. # 代理接口返回特定文件，返回的是js文件，可以使用node语法进行文件读取设置
  5. */api/shenshuai/info scriptfile://
  6. `
  7. var fs = require("fs")
  8. exports.handleRequest = async (ctx, next) => {  
  10.     var data = fs.readFileSync('/Users/shuai/Desktop/code/use2version/vue2temp/src/assets/text.json');
  11.     ctx.body = data.toString();
  12. }
  13. `
  15. # ^^聚合API^^^ 使用127.0.0.1:12888, 把api替换掉
  16. # */toutiao/index http://v.juhe.cn
  17. # http://192.168.0.101:8080 http://v.juhe.cn

返回js文件是，node读取文件

  1. github.com/alibaba/lightproxy scriptfile://`
  2. exports.handleRequest = async (ctx, next) => {
  3.   // do sth
  4.   // ctx.fullUrl 可以获取请求url
  5.   // ctx.headers 可以获取请求头
  6.   // ctx.options 里面包含一些特殊的请求头字段，分别可以获取一些额外信息，如请设置的规则等
  7.   // ctx.method 获取和设置请求方法
  8.   // const reqBody = await ctx.getReqBody(); 获取请求 body 的 Buffer 数据，如果没有数据返回 null
  9.   // const reqText = await ctx.getReqText();  获取请求 body 的文本，如果没有返回''
  10.   // const formData = await ctx.getReqForm(); 获取表单对象，如果不是表单，返回空对象{}
  11.   // ctx.req.body = String| Buffer | Stream | null，修改请求的内容
  13.   // next 方法可以设置 next({ host, port });
  14.   // 只有执行next方法后才可以把正常的请求发送出去
  15.   const { statusCode, headers } = await next(); 
  16.   // do sth
  17.   // const resBody = yield ctx.getResBody();
  18.   // const resText = yield ctx.getResText();
  19.   // const path = JSON.parse(reqBody).path
  20.   // 根据path的值可以设置不同的返回值
  21.   // ctx.status = 404; 修改响应状态码
  22.   // ctx.set(headers); 批量修改响应头
  23.   // ctx.set('x-test', 'abc'); 修改响应头
  24.   // ctx.body = String| Buffer | Stream | null; 修改响应内容
  25.   ctx.body = 'test';
  26. };`

通过nginx，配置nginx.conf

  1. server {
  2.   listen       3333;
  3.   server_name  localhost;
  4.   index index.html index.htm;
  6.   #charset koi8-r;
  8.   #access_log  logs/host.access.log  main;
  9.   #server/config.local.json
  11.   location / {
  12.   #proxy_intercept_errors on;
  13.   # root   /usr/local/opt/nginx/html;
  14.   # proxy_pass http://localhost:3330;
  15.   # proxy_pass http://101.35.111.19:8888/test/;
  16.   proxy_pass http://192.168.10.10:10004/api/;
  18.   # history 模式重点就是这里
  19.   #  try_files $uri $uri/ /index.html;
  20. }