charles本地调试之map、remote、rewrite功能

最新推荐文章于 2025-04-25 10:53:40 发布

原创最新推荐文章于 2025-04-25 10:53:40 发布

· 5k 阅读

24 ·

版权

工具专栏收录该内容

26 篇文章

订阅专栏

本文深入探讨了Charles代理工具的map功能，包括mapLocal和mapRemote的使用技巧，以及rewrite功能在请求和响应头部、URL、路径、参数、状态码和响应体的重写策略。通过实例展示了如何利用这些功能进行高效调试，特别是在跨域请求处理和API模拟方面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

map功能

map功能，顾名思义就是将某个请求进行重定向，用重定向后的内容来响应请求的内容；

map功能分为map Local和map Remote,二者区分是：

map Local：是将某个网络请求重定向到本地的某个文件
map Remote：是将某个网络请求重定向到另一个网络请求

二者除了重定向文件的位置不同之外，其他功能都是一样的。他们都可以对js、css、html以及api接口均可重定向，此外也可以使用通配符来进行简单的批量匹配，达到批量重定向的目的。

在使用map功能时，本人最常见的使用场景简要说明如下：

js、css重定向：主要是来调试js和css的实现效果
- 本地开发获取不到接口数据，那么就使用测试环境，通过map Local来将制定的js、css重定向本地进行开发
- 线上有个bug，想定位问题，但是线上代码都压缩过没法debug，这时可通过重定向到本地实现调试
html重定向：在开发过程中由于本地没有数据，那么可以使用测试环境的数据进行开发而不用mock数据，这时可以访问测试环境的某个页面，然后将其页面的html重定向到本地的某个页面来获取测试数据。
页面结构可能如下面这样，有3个js引用，前面2个js为每个页面公共的js，最后一个js为当前页的业务逻辑js：

    <scritp type="text/javascript" src="http://host/path/com1.js"></scritp>
    <scritp type="text/javascript" src="http://host/path/com2.js"></scritp>
    <scritp type="text/javascript" src="http://host/path/page.js"></scritp>

这时，将上面页面的html重定向到本地的开发页面html，由于本地页面的3个js有2个是公共的，所以他会加载测试环境的对应js，这时需要将业务逻辑的js也需重定向到本地js，这样就可以开发了；

他只用了2个重定向操作实现：可以实现本地开发，避免mock数据；否则需要多个重定向而且还需要自己mock数据。

api重定向：为了mock数据；一般使用map Remote功能来将本地的请求重定向到测试或者线上环境的网络请求。

除了单个map隐射外，还可以使用*通配符进行批量匹配，不用一个个建立重定向了。下面举一个实战的例子。

在项目开发过程中可能会遇到这种情况，本地开发总是要为各种数据而烦恼，那么能否在本地开发中批量用到某个环境的数据呢？答案当然可以！

在本人的某个项目开发中，本地开发因为没有数据，需要相应环境的数据，所以就需要将本地请求数据的api接口map Remote到车上环境来获取测试数据而不用进行大量的mock数据，因为涉及系统涉及到的数据api接口比较多，每个都进行单独重定向的话，效率太低；
而非数据api接口的请求不需要重定向，那么涉及到的问题是：

修改数据请求接口api的host为测试环境。

本地系统中的/api/路径下的请求都转到对应的测试环境(cmstest.intra.xiaojukeji.com)的对应目录/api/下,即数据接口请求的host改为测试环境hostcmstest.intra.xiaojukeji.com,请求路径保持不变；

`http://127.0.0.1:8080/api/transit-nepenthes/line/list` ---> `http://cmstest.intra.xiaojukeji.com/api/transit-nepenthes/line/list`

非数据请求api接口不进行重定向

具体的charles配置如下图所示：

注意上面map From中的Path配置项使用了*通配符，表示匹配127.0.0.1:8080/api/下的所有文件及子路径，将其重定向到cmstest.intra.xiaojukeji.com下的/api/路径下

上面的配置通过map Remote就是实现了区别对待本地系统的不同请求，将指定路径下的请求重定向到指定的环境，配置完成后看到所捕获的请求信息如下图所示。

这说明配置已经生效，那么本地开发，测试环境数据就可以看到了，剩下的就可以愉快的开发项目了，是不是超赞啊！

补充一下map隐射的相关功能

map隐射可以使用的模式匹配符有三种：
1. *: 可以匹配0个或者多个字符
2. ?: 可以匹配一个字符
3. [...]: 范围选择符，可以匹配范围中的任意一个字符
假设Map From配置中的各个项为空，表示匹配所有请求，然后Map To项的配置不同，代表不同含义，下表列出一个简单例子

Host配置值	Path配置值	配置产生的结果
charlesproxy.com		匹配所有的请求重定向到charlesproxy.com主机
*.charlesproxy.com		匹配所有的请求重定向到以.charlesproxy.com结尾的主机
charlesproxy.com	/charles/	匹配所有请求只重定向到charlesproxy.com/charles/路径下
charlesproxy.com	/charles/*	匹配所有请求只重定向到charlesproxy.com/charles/路径下,包括路径下的文件及其路径的子路径
charlesproxy.com	/charles	匹配所有请求只重定向到charlesproxy.com/charles下
charlesproxy.com	/index.html	匹配所有请求重定向到charlesproxy.com/index.html
	/charles/*.html	匹配所有请求重定向到任意主机下的以.html结尾的文件，该文件存放在主机的/charles/及其子目录下

Rewrite功能

rewrite功能重写对应的内容，主要可以对某些匹配请求的header、host、url、path、query param、response status、body进行rewrite。

rewrite功能支持正则表达式的写法，这是一个非常有用的功能；例如Math项的value正则式中的组捕获项在Replace的value值中可以使用$1~$n之类的捕获组

Rewrite的具体设置规则步骤，可以用下面一幅图来说明：

上面map Rewrite中用127.0.0.1:8080/api/*下的所有接口替换成指定host下对应的/api/*路径，而其他接口不做处理，用rewrite同样可以实现

下面就rewrite设置规则内容页面，就各项rewrite规则做一个简单说明，指出其对应的作用及其使用场景：

header：
- 作用：可以对请求或者响应的header内容进行操作，包括添加、修改及删除。
- 使用场景：在需要对header进行处理时用到，例如为了用上某个环境数据，可能需要对应cookie，这时本地开发是可以在请求的header中加上cookie信息；也可以重写响应header的信息

如下图，在本地开发时，需要的某个环境中的数据api接口需要当前登录用户的登录信息的cookie，本地环境没有这些cookie，这时就需要添加需要cookie头，如下图所示，为匹配的接口添加cookie相关的header：

host: 主要是对请求进行host修改，以达到本地请求获取指定host环境中的数据，常见于mock数据
url:
- 作用：修改url中某些部分，可以用别的url进行替换或者url裁剪时间戳或者md5等
- 使用场景：场景使用非常多，既可以对host也可以对path进行rewrite，可以满足指定host下的请求重定向到其他host下对应path下

path: 主要rewrite path内容使用指定rewrite规则的path来响应指定的请求path，它可以对paht进行裁剪

query param:
- 作用：可以对param进行操作，包括修改、添加、删除等
- 使用场景：有时请求可能多传递了不必要的参数，这时可以rewirte功能去掉多余的参数；另外也可以添加请求必须而暂时无法提供的参数
response status: 顾名思义就是对response的状态码进行rewrite；比方我想对一个指定页面A的访问重定向到另一个页面B，就可以用到这个。如下图：
body：
- 作用：对请求的响应内容做修改，一般是对某一个或几个值进行rewrite，用新的值来替代返回的值
- 使用场景：可以用来mock数据，比方说在开发中为了测试功能需要请求的某个数组字段有值，但是当前环境无法给出，那么就可以使用该功能

转载自 https://www.cnblogs.com/wonyun/p/5586746.html

自我练习

1.接口映射：Remote

<script src="./jquery-3.4.1.js"></script>
<script>
  $.get('/api').then((res) => {
    console.log(res)
  }).catch((err) => console.log('err', err))
</script>

（192.168.238.137为本地IP地址），但是如果设置为127.0.0.1或者localhost，是无法抓取到的（一直返回404），具体原因是Charles版本问题。

原文链接：https://blog.csdn.net/wg8ofk08/article/details/94561825

新版本的Charles，默认使用localhost作为地址的话，无法抓取本地的数据，会一直抓线上的数据，所以才导致，请求时找不到Api，因此，显示404，请求失败。

解决方案：
1. 重新进入Map Local配置中，重新配置Host。
2. 将Host的地址改为：localhost.charlesproxy.com，而不再是之前的localhost。
3. 再将访问的localhost:3000，改成http://localhost.charlesproxy.com:3000。
4. 完美解决！！！！

2. map Local settings

（可以将一个线上请求改写映射为一个本地文件，在接口调试的时候非常好用）

普通的直接在设置请求的替换路径是可以的。但是在saas中配置完成后总会提示产生了跨越问题，如下图设置：

map Local:

这时候要解决跨越问题，比必须设置下rewirte了，如下图：

Rewrite:

添加响应头（如果响应中已经有了，就千万别加了，否则还是会报错），我是如下图添加的，仅供参考。

这样就可以将远程的请求替换成本地的文件正常访问了。

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,OPTIONS
Access-Control-Allow-Headers: Accept,Origin,X-Requested-With,Content-Type,Last-Modified
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH

(PS: 理论上Access-Control-Allow-Origin: * ，就可以接受任何跨域头，但是我在自己的项目中并不可以，只能设置类似Access-Control-Allow-Origin: http://saas.firstbx.com，或者 Control-Allow-Origin: https://saas-test.firstbx.com ，才可以。猜测应该是和后台配置有关)

参考文章：

https://blog.csdn.net/bingleihenshang/article/details/83114419

http://www.51testing.com/html/22/n-3727022-2.html