实现whistle代理避开登录token、cookie实现线上地址运行本地代码

可可爱爱的你吖

已于 2024-05-30 16:43:39 修改

阅读量1k

点赞数 13

分类专栏： vue 文章标签：前端

于 2024-05-30 16:42:50 首次发布

开心

本文链接：https://blog.csdn.net/weixin_45324044/article/details/139327201

版权

vue 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

实现whistle代理避开登录token、cookie实现线上地址运行本地代码

简单介绍一下： whistle通常用于定位线上问题，把浏览器当做一个路由分发（理解为 nginx），把需要调试的服务转发到本地，达到调试线上代码的目的，同时也可以用于本地调试

1.安装插件

安装chrome插件Proxy Switchyomega

在这里插入图片描述
也可以去官网下载SwitchyOmega插件包，然后放到chrome扩展程序中

2.相关配置

在这里插入图片描述

3.全局安装whistle

npm install -g whistle
 w2 start

启动后如下图：
在这里插入图片描述
这时候可以通过http://127.0.0.1:8899/或者http://自己ip地址:8899/查看，如下图：(配置完后需要ctrl + s保存)

4.下载https相关证书

如果代理的线上地址为https，需下载https相关证书，如下图：
在这里插入图片描述

5.访问线上地址，运行本地代码

浏览器输入项目线上地址例如：https://XXXX.com，
并点击浏览器插件程序图上SwitchyOmega圆圈图标，并点击“proxy”打开代理功能，
在这里插入图片描述
此时浏览器打开的是线上网址，实际上运行的是本地代码，且项目无需再设置token,cookie可直接运行，如果要访问线上代码选择上图中的直接连接即可

有的vue2项目跑起来只能看到http://0.0.0.0:8080，看不到Network，可做如下配置

6.解决vue2只能运行在Local，不能运行在NetWork

在config文件夹下的index.js文件中dev节点下的host修改为0.0.0.0


module.exports = {
  dev: {
    host: '0.0.0.0'
  }

设置终端启动的localhost和network访问地址，修改build文件夹下的webpack.dev.conf.js文件中messages节点数组

compilationSuccessInfo: {
          messages: [
            `App runing at: `,
            `Local: http://localhost:${port}`,
            `Network: http://${require('ip').address()}:${port}`,
          ],
}