前端本地代理配置方式

置顶 Kevin&Amy

已于 2024-08-22 20:30:45 修改

阅读量226

点赞数 3

分类专栏：前端开发文章标签：前端 Whistle 代理

于 2024-08-22 20:26:10 首次发布

本文链接：https://blog.csdn.net/qq_38233258/article/details/141437007

版权

3 篇文章 0 订阅

订阅专栏

Whistle 介绍

Whistle 是一个基于 Node.js 的跨平台 Web 调试工具。允许捕获、查看和修改 HTTP/HTTPS 网络请求。通过使用 Whistle，可以轻松地进行接口代理、抓包、模拟数据、修改请求和响应等操作，以便在前端开发中调试网络请求。

Proxy SwitchyOmega是一个 Chrome 浏览器扩展，用于管理和切换多个代理设置。通过使用 Proxy SwitchyOmega，可以轻松地在不同的代理服务器之间进行切换，而无需手动修改浏览器的代理设置。
在这里插入图片描述

首先，确保已经安装了 Node.js。Whistle 是基于 Node.js 的，所以需要先安装 Node.js。可以访问 Node.js 官网下载并安装合适的 Node.js 版本。
使用 npm（Node.js 的包管理器）全局安装 Whistle。在命令行中运行以下命令：
```
npm install -g whistle
```
运行 Whistle。在命令行中运行以下命令：
```
w2 start
```
这将启动 Whistle 代理服务器，默认情况下，它将监听 8899 端口。

Proxy SwitchyOmega 是一个 Chrome 浏览器扩展，用于管理和切换多个代理设置。

安装完成后，点击浏览器右上角的 Proxy SwitchyOmega 图标，然后选择“选项”。
在新打开的页面中，点击左下角的“新建情景模式”。
输入情景模式名称，例如“whistle”，然后点击“创建”。
在右侧的“代理服务器”部分，将“协议”设置为 HTTP，将“服务器”设置为 127.0.0.1，将“端口”设置为 8899（Whistle 的默认端口）。
点击左下角的“应用选项”按钮，保存设置。

打开浏览器，访问 http://127.0.0.1:8899 进入 Whistle 的控制台。
在左侧的规则列表中，添加你的代理规则。例如，如果你想将所有访问 http://localhost:3000/api/ 的请求代理到 http://localhost:4000/api/，你可以添加以下规则：
```
http://localhost:3000/api/ http://localhost:4000/api/
```
点击右上角的“保存”按钮，保存规则。

在浏览器中，点击右上角的 Proxy SwitchyOmega 图标，然后选择刚才创建的“whistle”情景模式。这将启用代理。
现在，当你在浏览器中访问 http://localhost:3000/api/something 时，实际上会访问 http://localhost:4000/api/something。

注意，只有在选择了刚才创建的“whistle”情景模式时，代理才会生效。可以随时通过点击浏览器右上角的 Proxy SwitchyOmega 图标并选择不同的情景模式来启用或禁用代理。

通过使用 Whistle 和 Proxy SwitchyOmega，可以轻松地在本地开发环境中配置代理，以解决跨域请求问题、模拟接口数据、修改请求和响应等，从而提高前端开发和调试的效率。

关注