详细的Whistle代理工具解决前端跨域问题

最新推荐文章于 2025-06-16 12:20:52 发布
最新推荐文章于 2025-06-16 12:20:52 发布
阅读量888 收藏 7
点赞数 3
CC 4.0 BY-SA版权
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a4867/article/details/147249787

关于Whistle: whistle(读音[ˈwɪsəl]，拼音[wēisǒu])基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能

简单来说，我们可以通过Whistle实现web代理，解决跨域问题

1. 安装whistle

安装启动 · GitBook

$ npm install -g whistle
$ w2 start

start后访问任意一个即可

2. 安装配置Proxy-SwitchyOmega

Microsoft Edge Addons 如果是chrome，可能需要自行去网上找一下下载方法

安装完后点击选项

然后点击proxy -> 设置代理服务器(127.0.0.1)和代理端口(8899) ps. 8899是whistle的端口

最后一定要记得应用选项！！！

3. 配置whistle

如果需要抓https的包，需要安装一下证书Whistle 配置 https 抓包-腾讯云开发者社区-腾讯云

然后设置一下

比如配置，则访问github会被代理到baidu

https://github.com/ https://www.baidu.com/

最后如果浏览器提示has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.的话，需要在后面配置一个resCors://*

a4867
关注
Whistle Web Debugging Proxy介绍及使用
若不知道要驶向哪个码头，那么任何风都不会是顺风。
05-08 2291
大家好，今天继续给大家分享一款抓包工具，这款抓包工具是网页的形式，方便多人访问同时维护。Whistle Web Debugging Proxy是一个用于HTTP、HTTPS、WebSocket等网络协议的跨平台调试工具。它可以帮助开发者对网络请求进行捕捉、分析、修改和重定向等操作，从而提高调试效率。Whistle提供了丰富的自定义规则功能，可以满足各种复杂场景下的调试需求。
抓包工具之whistle(http、https、socks5)
西京刀客
04-01 1370
[whistle](https://github.com/avwo/whistle)(读音[ˈwɪsəl]，拼音[wēisǒu])基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的[Fiddler](http://www.telerik.com/fiddler/)，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用
解决本地请求跨域问题，替换代理，Whistle + chrome扩展工具SwitchyOmega
qq_39706777的博客
08-03 6679
一、Whistle 1.安装Whistle Whistle官方文档 npm install -g whistle 2.启动服务 w2 start 3.访问配置页面 方式1：域名访问 http://local.whistlejs.com/ 方式2：通过ip+端口来访问，形式如 http://whistleServerIP:whistlePort/ e.g. http://127.0.0.1:8899 Whistle 域名替换规则 以下访问github，将出现baidu首页 https://
Whistle如何配置pc端代理实现抓包（window11）
weixin_45470210的博客
11-21 1402
端口：whistle启动时使用的端口（可以在whistle界面点击右上角online查看），我这里用的是8081。选择将所有的证书都放入下列存储，然后点击浏览，选择受信任的根证书颁发机构，点击确定一直按步骤安装下去即可。证书安装成功后，打开浏览器输入网址浏览网页，可以在whistle的network页面看到抓包成功。浏览器打开whistle，点击HTTPS，再点击Download RootCA下载证书。后续想打开抓包，也是Internet属性面板配置好代理服务器即可，不需要重复安装证书。
mac安装whistle代理抓包工具（支持mock）
最新发布
鱼小鱼的博客
06-16 926
工具地址：https://wproxy.org/whistle/
whistle网络抓包
weixin_46820017的博客
04-28 955
手机设置代理 连接好指定的wifi后，点击那个wifi里的设置，将「代理」那一项，设置为手动，然后输入ip（电脑上的ip）、端口号（8899）。然后就可以通过电脑上的whistle工具，查看手机的网页请求。 注意，要保证手机和电脑在同一个网络下。 捕获和拦截https请求 whistle安装证书后，可以拦截 https 请求。但是，我现在又不想拦截https请求了，该怎么卸载证书呢？ 我发现，证书无法卸载，正确的操作是： 上图中，把红框部分，去掉勾选，就不捕获https了。谢谢azh童鞋。 参考链接：
跨平台 Web 调试代理工具 Whistle
初入江湖，多多关照
05-22 1046
Whistle 是一款基于 Node.js 开发的 跨平台 Web 调试代理工具，支持 Windows、macOS 和 Linux。它通过拦截和修改 HTTP/HTTPS 请求，帮助开发者快速调试网络问题、Mock 数据、分析性能瓶颈，是前端开发和网络抓包的利器。
whistle代理
公众号-程序员灿灿
12-17 1011
定位线上问题的方式之一，可以使用代理到本地调试。 安装whislte 安装node brew install node 安装whistle npm install whistle -g --registry=https://registry.npm.taobao.org 添加环境变量 cancanliu@cancanliu ~ % vim ~/.bash_profile export PATH=$PATH:/Users/cancanliu/.npm-global/bin:$PATH 使环境变量永久生
01.whistle-用于实现跨平台web调试的代理工具
qq_29517595的博客
06-10 546
whistle，用于实现跨平台的web调试的代理工具，是基于Node实现的，它采用类似配置系统hosts的方法，可以用于查看、修改HTTP、HTTPS、Websocket的请求、响应，还可以作为HTTP代理服务器使用。在whistle里，一切操作都可以通过配置来实现。 whistle参考文档地址：http://wproxy.org/whistle/ 以下为whistle的一些常用操作： 1.设置host www.ifeng.com 127.0.0.1/127.0.0.1:8080 #or 127.0.0.
前端开发中使用whistle代理工具
cafehaus的博客
03-23 871
代理工具有很多像‌比较有名的Charles、‌Fiddler，最近发现了一款宝藏代理工具，看到团队中有很多人在用，刚开始还有点不太理解，前端我们一般代理接口解决跨域这些不都是直接在webpack、vite中配置代理规则就行了。直到使用了whistle之后发现真香，提供的功能也比较强大，下面就分享几个在前端开发中实际使用的场景。注意需要依赖本地node环境，谷歌浏览器中一般会配合SwitchyOmega插件来使用，具体的一些基础配置可以参考whistle官方文档。
2022年Web前端开发流程和学习路线（详尽版）
weixin_47367099的博客
06-13 9713
前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题（包括产品、设计、后端、甚至看不见的问题）的表现形式，都会暴露在前端，而只有部分问题（数据问题、计算问题、安全问题等）暴露在后端，这就意味着前端起到了至关重要的承载和连接作用。前端技术的更新日新月异；前端框架的技术选型百家争鸣；视觉审美的潮流不断更替；可视化效果酷炫无比；用户的运营体系逐渐精细化；适老化、无障碍化、青少年人群的诉求浮出水面；智能设备的升级和适配无穷无尽。所有的这一切，对前端领域和前端同学就一个
Whistle，web 抓包与 debug 利器
dinghuancheng5372的博客
11-25 1653
什么是 whistle whistle 是一个跨平台的抓包与 web debug 工具，使用 whistle，你可以配置代理服务器，模拟接口数据，捕获请求重定向到指定 url，修改请求头响应头，修改 GET 请求的参数，往匹配的页面中注入 js、css whistle 提供了和 fiddler 类似的功能，也提供了一些 fiddler 没有的功能，使用体验比 fiddler 好很多，一...
Mac 从零搭建Android开发环境记录以及提高效率软件推荐
ZLMrche的博客
05-12 1420
背景：近期工作发生变动，开发环境由windows转向了mac，此前对mac了解甚少，在此记录下配置开发环境的过程，并分享一些高效的工具。 一. 配置Java环境 虽说Android Studio自带了JDK但是OpenJDK还是和JDK有些差异的 为了以后不出现莫名其妙的错误,建议更新使用JDK(Oracle公司开发的) 1.首先下载安装JDK 下载地址http://www.oracle....
使用whistle代理
qq_39291028的博客
04-05 5477
whistle是基于node实现的跨平台web调试代理工具，主要用于查看、修改http、https、websocket的请求、响应，也可以作为http代理服务器使用。类似的工具有Fiddler，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，配置使用起来非常简单。 安装与启动 前提：安装Node程序 访问https://nodejs.org，安装最新版本默
Whistle 在手机上配置代理
Rux子兮的博客
05-10 1498
2、点击https展示whistle下载二维码，用手机浏览器扫码下载并安装rootCA.crt 证书。显示高级选项 > 代理（手动）服务器主机名（自己电脑的IP）完成这些操作就可以愉快的开发了。1、运行Whistle。
whistle代理、SwitchyOmega 安装及使用
m0_61049675的博客
12-11 2125
2、数据请求和页面请求进行分离，aa.com/api是后端接口，返回的是一串JSON数据，aa.com返回的是一个html页面，假设页面aa.com想要获取aa.com/api的JSON数据，由于前端（8081）与后端（8080）使用的端口不同，导致出现跨域，前端8081是访问不到后端8080数据的，使用代理来访问相同域名下的不同路径就可以避免这个问题；1、安装完成后，命令行输入： w2 help，看到如下图界面，表示已安装成功。3、https必须安装证书！2、安装 Whistle。
whistle 一个神奇的前端调试工具（抓包\代理工具）
wang_9909的博客
02-10 3040
神奇的whistle，免费的调试工具。
配置whistle代理
m0_71735156的博客
01-03 1170
安装地址：http://wproxy.org/whistle/ 第一步：安装node(支持0.10.0以上版本，安装完可执行node -v查看当前node版本，如果能正常输出node版本号，代表安装成功) 第二步： 第三步：whistle安装完成后，执行命令whistle help或w2 help，查看whistle的帮助信息(如果能正常输出whistle的帮助信息，表示whistle已安装成功) 第四步： 第五步： 第六步：
whistle+SwitchyOmega代理工具安装及使用教程
ppy0915的博客
04-23 2185
1.首先进入whistle界面，首先点击https，！在键盘输入win+r => 输入cmd => 点击回车打开命令行 => 输入w2 help，如果能正常输出whistle的帮助信息则说明已经安装成功。在键盘输入win+r => 输入cmd => 点击回车打开命令行 => 输入相应命令查看版本号，如果显示版本号就说明安装成功。在键盘输入win+r => 输入cmd => 点击回车打开命令行 => 输入下面的命令安装whistle。下载完后打开安装包，一直点下一步，直到安装成功。
nginx反向代理如何解决前端跨域问题
07-14
在使用nginx作为反向代理时，可以通过一些配置来解决前端跨域问题。下面是一种常见的解决方案： 1. 打开nginx的配置文件，一般为nginx.conf。 2. 在http块中添加以下配置，允许跨域请求： ```nginx http { ... # 允许跨域请求 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept'; add_header 'Access-Control-Allow-Credentials' 'true'; ... } ``` 这些配置项中，`Access-Control-Allow-Origin` 设置了允许的域名，可以使用通配符`*`表示允许所有域名访问；`Access-Control-Allow-Methods` 设置了允许的请求方法；`Access-Control-Allow-Headers` 设置了允许的请求头；`Access-Control-Allow-Credentials` 设置了是否允许携带身份凭证，如cookies等。 3. 重启nginx服务使配置生效。 通过以上配置，nginx会在响应中添加相应的跨域头，从而解决前端跨域问题。请注意，在实际生产环境中，应根据具体需求来设置合适的跨域配置，以确保安全性和正确性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值