使用charles抓包手机端的网络请求

前言

  1. Charles (下载对应操作系统的安装包进行安装,本文使用 macOS 进行演示)
  2. iPhone (本文使用8 PLUS,系统版本:iOS 10)

开始

首先,对Charles进行配置:

  1. 菜单:Proxy -> Proxy Settings… -> 勾选 Enable transparent HTTP proxying
    1
    然后找到电脑的局域网IP地址:这里自己去找吧

  2. 接着,打开你的iPhone:设置 -> Wifi -> 连接上和电脑同一路由器的Wifi,点击右边的 i 符号进入配置

  3. 配置:拉到底部,找到 <HTTP代理>, 选择手动, 服务器填入电脑的IP地址,端口号写 8888 然后返回会刷新Wifi连接

    设IP,端口:
    2
    保存,返回。

此处配置完成后,Charles会弹出提示框,

大意是:有人请求连接Charles ip是xxx.xxx.xxx.xxx是否允许?

这里要注意!!!Charles的默认选项是Deny拒绝,所以一定不要按回车!!! 手动选择Allow!!!

到此,即可正常抓取iPhone的连接。

但,目前苹果的大部分App都采用了更安全的HTTPS进行数据交互,所以我们要抓取HTTPS还需要进一步的配置。

继续

回到Charles,进行证书安装:

Charles菜单:Help -> SSL Proxying -> Install Charles Root Certificate 点击后自动打开钥匙串访问,请输入电脑开机密码
3

Help -> SSL Proxying -> Install Charles Root Certificate
完成后你会看见两个证书:

双击证书,打开证书详情,两个证书都设置为始终信任:展开信任 -> 使用此证书时:修改为 始终信任,关闭证书详情要求输入开机密码

接着,安装手机端的证书:
回到Charles,菜单:Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser

点击后会弹出对话框,大意是:配置你的设备来使用Charles,证书下载地址:chls.pro/ssl

打开手机Safari,访问下载地址:chls.pro/ssl (如果我们显示的不同,则以提示中的地址为准)

正常情况下访问此地址会请求安装一个配置文件。若无请求请检查Wifi是否设置了 HTTP代理 (参考配置图:设置 -> Wifi -> i -> HTTP代理 手动)。

点击安装:

网上很多教程到这就结束了,但返回Charles会发现还是无法正常抓取HTTPS的请求。
其实还有一个设置,信任证书:
打开iPhone设置:通用 -> 关于手机 -> 拉到最底部 证书信任设置 -> 勾选刚刚安装的证书

好了,回到Charles进行最后的收尾设置:
菜单:Proxy -> SSL Proxying Settings…

勾选:Enable SSL Proxying,点击 Add 添加规则

域名:配置完上述所有内容后,你会在Charles中看到很多请求,都是以域名为标题的
端口:恒定为443
若不需要指定HTTPS连接(即抓取所有HTTPS连接),域名填写 * 即可。

TIPS:

WIFI代理,请在不需要使用的时候关闭,否则可能导致手机无法正常联网。
若Charles界面一片空白

点击菜单:File -> New Session

然后就有了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue开发移动端App时,可以使用一些工具和组件来进行适配和开发。首先,在main.js中引入`vue-awesome-mui`并使用`Vue.use(Mui)`来引入MUI组件库。注意,MUI只能在手机使用,所以在浏览器运行时可能无法看到效果。\[1\] 为了适配移动端设备的屏幕大小和比例差异,可以使用`flexible.js`进行适配。在main.js中引入`flexible.js`文件,并将其作为静态文件放在最外层的static文件夹中引入。这样可以实现移动端项目的适配。\[2\] 在开发移动端App时,可以使用一些常见的组件和标签,如`router-link`用于导航跳转,`keep-alive`用于缓存不活动的组件实例,以提高性能。此外,还可以使用一些UI组件库,如`mint-ui`和`vant-ui`来快速构建界面。\[2\] 除此之外,还可以使用Axios进行网络请求的封装,使用iconfont图标库,连接真机进行调试,打包APK并发布应用。在开发过程中,可以不断学习并更新项目,逐步完善项目结构和功能。\[3\] 总结来说,开发Vue移动端App需要引入相应的组件库和工具,进行适配和开发,并不断学习和更新项目。 #### 引用[.reference_title] - *1* *2* *3* [vue开发移动端app-学习记录](https://blog.csdn.net/weixin_44736005/article/details/113406120)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值