使用Charles实现本地数据mock

最新推荐文章于 2025-09-06 11:43:27 发布
原创 最新推荐文章于 2025-09-06 11:43:27 发布 · 1.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#windows #reactjs #chrome #前端

本文详细介绍了如何使用Charles代理工具实现本地数据的Mock。包括老版本Charles的配置方法及新版本下通过修改Host解决的问题。适合希望在开发过程中快速搭建Mock环境的前端工程师。

使用Charles实现本地数据mock

 

 

一、老版本Charles使用

  1. 准备Charles工具,没有的话去下载(https://www.charlesproxy.com/latest-release/download.do)，如下图这玩意image.png

  2. js发送axios请求

    image.png

  3. 桌面新建mock文件(不一定要桌面，其他位置也可以，只要记住就行)

    image.png

    image.png

  4. 打开charles,步骤如下

    image.png

  5. 勾选Enable Map Local,然后点击Add

    image.png

  6. 根据项目运行地址填写端口号

    image.png

    image.png

  7. 勾选，然后ok

    image.png

  8. 刷新浏览器，如果接口正常返回200，那么恭喜你，你的版本属于比较低的，如果接口还是报404，那么继续往下看吧

 

 

 

 

二、新版本如何使用？

方案一：把之前的host的locahost改成ip,项目使用ip访问即可。

image.png

image.png

方案二 把之前的locahost改为localhost.charlesproxy.com

image.png

image.png

到这里，mock文件的内容也能读取到了。你学会了嘛？

image.pngimage.png

 

 

 

总结：Charles老版本不在支持Host为localhost访问本地文件，可以使用ip进行访问,如果一定要用localhost，请使用映射localhost.charlesproxy.com

 

 

Charles mock本地数据跨域问题
小菜鸡的错题本
05-31 1091
原因：因为加上Access-Control-Allow-Origin出现了2个请求头。如果不配置Access-Control-Allow-Origin 被mock的接口又出现上面的问题。解决再增加一条remove header 去掉多的Access-Control-Allow-Origin。原因：跨域问题，在charles中Rewrite中添加对应的信息。
使用Charles Mock响应数据
我们仨
04-01 961
1.需求 根据学生的等级显示不同的段位图标，现在想要验证前端展示的段位图标是否正确，是否与UI一致。如下图所示：共17个等级，每个等级对应一个段位图标，共17个图标 例如，一个学生的Level是4，段位图标是秀才，如下图所示，想要展示Level等于5的段位图标应当怎么操作呢？ 2.实现方法 使用Charles打响应断点 Mock响应数据 2.1.使用Charles打响应断点 具体用法参考打响应断点，修改响应数据这篇文章！ 2.2.Mock响应数据 2.2.1.首先，使用Charles
Charles本地mock数据
qq_21696621的博客
04-02 265
之前可以mock本地json数据的，最近突然失效了，访问报404，百度搜索了下，发现Charles版本不支持本地代理了。。。当前使用版本：4.5.6 解决：将原来的localhost配置为本机的ip地址（通过ipconfig查看） 以后都是通过本机ip访问接口就可以访问通了。目前在尝试将版本降为3看看能不能使用localhost ...
使用Charles进行移动端Mock数据
zhangkexin_z的博客
12-19 1316
首先需要从Charles的官网下载并安装Charles工具。安装完成后，点击Help-> Register… 进行注册，注册地址：https://zhile.io，Licenses：48891cf209c6d32bf4。安装完成后，需要配置Charles的代理。通常情况下，我们需要将浏览器的网络代理设置为Charles的运行地址和端口（默认为localhost:8888）。配置完成后，打开Charles，我们可以看到所有的HTTP和HTTPS请求都会被Charles捕获。
本地MOCK
最新发布
2301_81854535的博客
09-06 880
本地 Mock指的是在开发环境中，通过模拟（Mock）后端 API 的请求响应数据，使得前端（或客户端）开发能够在不依赖真实后端服务器的情况下进行。“伪造”一个后端服务，这个服务会按照预先约定好的接口规范（如 RESTful API、GraphQL 等）返回模拟的数据。方法适用场景优点缺点硬编码快速原型、简单项目简单污染代码，难维护拦截请求 (MSW)现代前端项目主流选择无侵入，功能强大，逼真需要学习配置独立服务器 (JSON Server)模拟完整的 REST API功能完整，无需编码。
charles的简单操作
qq_72697024的博客
08-08 1837
Charles的设置和使用
Charles使用及mock数据
sinat_38679519的博客
08-01 2917
1、下载charles 3.9.2【破解版地址：https://download.youkuaiyun.com/my】 下方有一种方法可破解4.2以前的版本 // Charles Proxy License // 适用于Charles任意版本的注册码，谁还会想要使用破解版呢。 // Charles 4.2目前是最新版，可用。 Registered Name: https://zhile.io Li...
使用Charles配置map local进行本地的接口数据模拟仍然出现404错误
浮生离梦的博客
05-09 1598
一、问题出现： 在之前使用 Charles 工具中，点击 Tools，再点击 map Local，再点击 add进行添加的时候，配置好Protocol、Host、Port、Path和Local Path，再进行本地数据的接口请求的时候，仍然报出了404 错误，路径访问不到。 二、问题分析及解决：这是因为新版的Charles，如果默认使用localhost作为地址的话，无法抓取本地的数据，会一直抓线上的数据，所以导致请求找不到API，一直报 404的错误，对此的解决办法： 先需要在配置接口时，将 Hos
使用Charles mock数据之Map功能
weixin_43016362的博客
05-22 828
2、右击选择Map Remote后填写请求；或点击Tools-->Map Remote。场景：接口只在特定环境能用或只在特定环境有，将测试环境的接口换成特定环境的接口；2、右击选择Map Local或点击Tools--Map Local填写请求。3、把这些都设置好之后，再次重新请求刚才的接口，可以看页面显示了修改后的数据。1、先请求想要重定向的接口，将接口的返回数据保存到本地，修改成想要的返回数据。功能：将指定的网络请求重定向到另一个请求。功能：将指定网络请求重定向到本地文件。1、先请求想要重定向的接口。
使用Charles实现发送请求代理到本地文件mock，报错404有效解决办法
weixin_42529444的博客
05-05 1292
使用Charles实现发送请求代理到本地文件mock，报错404有效解决办法 今天是第一次使用Charles来实现自己项目的接口mock数据的时候就遇到了坑，好一会找。本来是看着一个教程视频在学习，无奈卡在了第一步。按照视频中一步步下来，视频中就正常拿到数据了，换我这边就是一直在报404。 郁闷… 解决 在不断的和视频中去对对照细节，确认无误之后，一番百度，发现网上都是些使用Charles抓包之...
Charles 抓包工具教程(五) Charles 如何进行Mock
雨水的早晨的博客
11-12 6785
Charles 进行Mock测试
Mockman是一款强大且方便的用来本地开启和管理Mock服务的跨平台开源工具
08-07
Mockman 是一款强大且方便的用来本地开启和管理Mock服务的跨平台开源工具。凭借Mockman，你只需要简单的配置Mock服务的本地运行端口、路由、请求格式以及返回数据，即可开启自己的Mock服务
使用Charls Mock接口返回数据
m0_72732835的博客
01-06 1183
使用charls进行mock数据
charles-mock数据
谨言的博客
02-22 1100
4、在页面上操作，重新请求一次接口，这时候访问的应该就是本地文件了，接口的图标也变成了本地文档的样式。如果保存了一个接口多次的mock数据，在下一次mock接口时，把上一次的接口2取消勾选就可以了。mock接口后，默认下一次是访问本地文件，取消本地访问勾选就可以重新访问服务器。1、通过Charles抓包，找到需要mock的接口，把返回的结果保存到本地。2、打开保存的文件，文件返回的结果/结构改成自己想要的模式，改好后保存文件。3、选中刚刚保存数据的接口，右键选中访问方式，上传本地文件。
抓包工具Charles(五)-使用本地映射修改接口响应内容（Map local）
公众号|软件测试老吴
04-05 2409
排查问题、调试功能时，通过修改接口数据，可以大大加快开发和测试的速度。在Charles中利用本地映射（Map local）可以达到修改接口返回数据的目的。
Charles抓包工具-配置接口mock(图文详解)
qadnkz的专栏
02-23 1200
此时浏览器访问https://www.baidu.com时，charles mock接口的返回接口为最新配置的。其中Local path 指定设置好的json文件，注意文件扩展名最好设置为json，如下。配置访问百度时，mock接口，指定返回结果，设置如下，点击ok。1、保证charles可以正常抓包，charles抓包配置如下。
charles 断点 弱网络测试 修改本地内容操作
weixin_66336481的博客
04-20 430
设置断点 先选择接口 右键选择，选择breakpoints (确认使用断点功能) 然后点击proxy，选择breakpoint settings... 进入设置breakpoint settings页面 点击对号，选择已经存在的数据，删除 点击add添加新数据 填写数据的内容 查看是否成功添加数据 点击OK，到浏览器重新搜索。抓包 修改搜索内容并保存 弱网络测试 从proxy中找到throttle settings ...
通过抓包软件Charles和Fiddle快速模拟(Mock)数据
weixin_30436101的博客
07-25 572
使用Charles实现本地数据mock 由于在实际开发中，一般进行前后端分离，通过接口来进行数据交互。所以我们使用charles-proxy来进行模拟数据接口。Charles能够抓取浏览器发起的请求，然后做出一些处理和返回。官网下载 配置参考 注册账号(不注册的话，30天会过期，每隔一段时间会关闭一次) 账号：https://zhile.io 密码：48891cf209c6d32bf4 ...
其他主机访问我本地的mock接口
Tison的博客
05-10 893
保持在同一个局域网下，其他主机用我本地的ip加接口地址进行访问
如何使用charles进行数据mock
04-26
5. 在 Charles 中，可以通过 “Tools” -> “Map Local” 来创建本地映射，将指定的请求映射到本地文件或者 URL，实现数据 mock 的效果。 需要注意的是，在 mock 数据时，需要保证修改后的请求和响应格式与原始请求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值