Charles--查看运行时调用的接口

Charles是一个HTTP代理服务器,当浏览器连接Charles的代理访问互联网时，Charles可以监控浏览器发送和接收的所有数据（APP和WEB均适用）。下面主要介绍如何利用Charles查看运行时调用的接口。

不用Charles，用浏览器F12功能键查看接口

点击接口进入，发现有Headers，Preview，Response，Timing

在Headers里可以查看接口的URL地址以及data（Request Payload）–>用于后续Postman介绍

用Charles，查看浏览器接口

配置web端charles

• 安装charles证书
  
• 填入需要代理的网络Host和端口号
  -
  至此web端代理设置完毕，当登录所填写的Host地址时，可以看到所有调用的接口

配置APP端charles

• 前两步骤与web端一致
• APP与WEB端的WiFi网段一致（连接同一WiFi）
• 通过查看cmd-ipconfig，得出web端IPv4地址，APP点击“修改网络-手动代理-服务器主机名输入Ipv4地址-服务器端口（4位数字）-点击保存”
• Charles端：Proxy-ProxySettings-设置port（即APP设置的服务器端口）
• Charles端：Help-SSLProxying-installCharlesRootCertificate on a mobileDevice or a remoteBrowser查看是否连接你的Ipv4地址+服务器端口
  

可能出现的问题

• 连接不上APP：APP端也需要证书，输入网址chls.pro/ssl，会提示下载证书，此时下载的是个.pem 格式的，需要手动更改为.crt 格式，然后用360手机助手传到手机DCIM文件夹。进入手机设置，点击“更多设置->系统安全->从存储设备安装->Download->.crt文件->确定”，在弹出窗，对证书命名为：Charles，点击确定（首次安装证书会让输入锁屏密码）。至此手机证书安装成功！（华为平板路径有些不同：设置----安全----从SD卡安装----内部存储空间----DCIM打开文件）
• 乱码问题-web端证书没有安装成功，重新安装即可