美文网首页
前后端如何通过Charles进行本地联调

前后端如何通过Charles进行本地联调

作者: ChrisZ_B612 | 来源:发表于2019-05-03 10:18 被阅读0次

一、名词解释

A机:请求发起方电脑,如:前端同学的电脑

B机:请求接收方电脑,如:后端同学的电脑

二、操作步骤

1、假设此时A机要跟B机联调B机的本地服务接口:https://api.beidai.com/gateway/route.html?method=beibei.finance.beidai.discover.get,B机确保自己能通过https://api.beidai.com/gateway/route.html?method=beibei.finance.beidai.discover.get访问到自己本机提供的服务;假设此时A机的IP地址为192.168.0.2,B机的IP地址为192.168.0.3,请确保A机能够ping通B机的IP。

2、双方各自打开自己的Charles,

3、B机打开Charles设置项Proxy > Proxy Settings,然后勾选Enable transparent HTTP proxying,此时B机的Charles监听的是默认的8888端口。

4、A机打开Charles设置项Tools > DNS Spoofing,新增一条记录将域名api-test.beidai.com(你也可以换一个你喜欢的)解析到192.168.0.103

5、A机打开Charles设置项Tools > Map Remote,新增一条记录将所有查询参数包含method=beibei.finance.beidai.discover.get的请求转发到http://api-test.beidai.com:8888,也就是把所有A机收到的请求都转发到B机的Charles上。

这里需要注意的是,上图中的Map To协议要选择http协议,因为如果你选了https,那么你还要安装B机的Charles证书才能把https请求转发过去,贼麻烦,所以索性就选http就好了。另外一点是一定要勾选Preserve host in header fields这个选项,否则你打到B机的请求就是http://api-test.beidai.com:8888而不是http://api.beidai.com了。

这一步你也可以视需求灵活处理,如果你想要把所有的api.beidai.com的请求都转发到B机上,那么你可以在上一步中直接将api.beidai.com解析到192.168.0.103即可,此时所有以http或https开头的api.beidai.com接口请求都会被转发到B机的Charles上。

6、全都配置好以后,A机接受到的method=beibei.finance.beidai.discover.get接口请求就都会被转发到B机上,B机第一次收到请求时会弹出“是否允许连接”的弹窗,此时毫无疑问要选择“是”,然后B机就应该能够收到A机转发过来的请求了,此时大家就可以愉快地联调了:)

三、写在最后

其实上面的步骤中有很多都可以灵活处理,只要我们明白了HTTP协议只是一堆纯文本发来发去,就可以善用Charles提供的各种强大功能来满足我们的需求了。过程中有任何问题,欢迎留言讨论。

相关文章

  • 前后端如何通过Charles进行本地联调

    一、名词解释 A机:请求发起方电脑,如:前端同学的电脑 B机:请求接收方电脑,如:后端同学的电脑 二、操作步骤 1...

  • 初涉Mock数据

    前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据? 需要联调的有以下两个方面的资源: css、j...

  • 第12章 Vue项目的联调、测试与发布上线

    12-1 Vue项目的联调测试上线--项目前后端联调 当我们项目开发完成后,我们需要和后端进行联调,那么我们需要把...

  • webpack 代理与koa服务 api mockjs 数据

    目的: 解决开发联调中的痛点(存在跨域,不能请求),前端与后端本地联调阻断,webpack 代理转发解决请求 双向...

  • 2019-07-11

    你们公司是如何做接口联调的?(公司项目里如何进行前后端接口联调) 最近Jack进入一家新的公司,正好公司项目采用的...

  • 任务24

    问答 1. ajax 是什么?有什么作用? 2. 前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数...

  • homestead 暴露接口 外部访问

    homestead 暴露接口, 允许统一局域网的电脑访问 本地搭载的虚拟环境, 现有需要前、后端联调测试的需求, ...

  • 解决:Trying 127.0.0.1... telnet: c

    问题背景: 使用SparkStreaming整合Flume,进行本地环境联调,在服务器端通过telnet命令向44...

  • 如何构建Spring Boot的Mock环境

    最近项目中需要进行前后端联调的工作比较多,而前后端联调最复杂的部分就是接口格式的定义和Mock数据的生成了,在查阅...

  • browser-sync 和 http-proxy-middle

    最近在做一些活动页面的开发,在开发的过程中要用到和本地server并进行本地联调,而在本地服务联调中无可避免的会涉...

网友评论

      本文标题:前后端如何通过Charles进行本地联调

      本文链接:https://www.haomeiwen.com/subject/mtsanqtx.html