Charles配置使用过程中问题处理

对于前端日常工作中遇到的问题,我们可以通过抓包方式进行问题排查。尤其是当无法通过控制台进行查看或者无法查看接口的时候,一个好的抓包工具能节省很多处理问题的时间。目前使用比较多的应该就是Charles了,使用方便,配置起来也很简单。

但是今天本文并不是介绍如何使用,而是简单说下使用过程中遇到的问题及处理方式,毕竟关于配置使用网上教程已经很多了。话不多说,我们开始(本文主要针对mac,window原理同):

一、抓包接口出现unknown,同时数据乱码

这个问题应该是遇到最多的了,主要从以下几个方面进行排查:

1。证书是否安装及证书是否被信任、是否过期

可以点击上图选项,如果没有安装证书会提示安装,如果已安装会跳转到系统证书窗口。可以搜索charles搜索出相关证书,查看是否已经过期,如果过期可以删掉证书,重新安装;是否已被信任,如果未被信任,可以双击进去修改设置。

2、检查sslproxy设置

如果证书没有问题,接下来就从配置上查看,通过Proxy--SSL Proxying Setting打开设置页面,检查是否勾选Enable SSL Proxying,勾选之后,点击includeadd按钮,此处注意一定是include下的配置,如果添加了exclude那无论怎么修改都一直是unknown(别问我是怎么知道的😭)。点击add按钮后,在配置的host和port里都添加*即可,表示接受任何端口的请求。当然port也可以添加443或者其他,根据自身需要,添加完后保存即可。

通过上述方式排查,unknown的问题基本就能解决了。

二、代理本地开发localhost无法抓包

有时候我们本地开发可能会使用抓包去查看一些数据,但是发现无论是访问localhost还是127.0.0.1都无法成功抓包,可以采用下面两种方式:

1、使用 localhost.charlesproxy.com

这事charles官方给出的方法,将原本的localhost替换成localhost.charlesproxy.com,可以发现能够成功抓包。

2、通过修改host方式

既然无法通过ip地址方式获取数据,那么我们可以把本地的域名指向任意一个自定义的域名,然后去访问域名就可以成功抓取数据了。这里给大家一个好用的工具switchHosts,可以一键开启关闭host代理和修改。这里我们将127.0.0.1指向aa.test.com,然后直接去访问aa.test.com:3000/path(自己的项目路径)就可以了。

三、vue3+vite项目开启本地代理无限刷新

如果项目是通过vue3+vite开发的,在通过上述方式开启本地代理的时候,会发现页面一直反复刷新,即使成功打开了,还是会不断的刷新,如果发布到测试或者生产环境是没问题的。

这个问题产生是开发环境热更细问题导致:由于开启代理后,走的端口发布前端项目和框架本身的ws走的端口不一样,导致ws在请求服务器的时候提示连接失败,从而不停的刷新界面,请求服务器获取连接。

处理这个问题,可以在vite配置里添加hmr的一条配置即可,使其ws请求也走我们的代理地址就可以了,上代码:

css 复制代码
server: {
    host: '0.0.0.0',
    port: 3000,
    proxy: devProxy === 'true' ? {
      '/api': {
        target: 'https://test.value.com', 
        changeOrigin: true,
        rewrite: path => path.replace('/api', '/')
      }
    } : {},
    
    // 避免host代理之后热更新无限刷新
    hmr: {
      protocol: 'ws',
      host: '127.0.0.1'
    }
  }

以上三条就是近期在使用charles过程中遇到的问题,问题不大,但是也花费一定时间进行了检查和处理,希望能够帮助有同样困惑的小伙伴。

相关推荐
sunn。2 小时前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui
Heidi__5 小时前
Vue 3 的响应式原理
前端·javascript·vue.js
Monly217 小时前
Vue:Table在点击删除的时候阻止行点击事件
前端·javascript·vue.js
工业互联网专业8 小时前
基于springboot+vue的二手车交易系统
java·vue.js·spring boot·毕业设计·源码·课程设计·二手车交易系统
前端小趴菜059 小时前
记录 vue-router访问 / 路径直接重定向到有权限的第一个菜单
前端·javascript·vue.js
Eva21566510 小时前
Flask+Vue构建图书管理系统及Echarts组件的使用
vue.js·flask·echarts
艾克马斯奎普特12 小时前
Vue.js 3 渐进式实现之响应式系统——第六节:嵌套的 effect 与 effect 栈
前端·vue.js
fayeyoko13 小时前
vue如何实现触摸板双指滑动(非长按滑动)
vue.js
醋醋13 小时前
vue2源码记录(2)
前端·vue.js
艾克马斯奎普特13 小时前
Vue.js 3 渐进式实现之响应式系统——第五节:分支切换与 cleanup
前端·vue.js