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过程中遇到的问题,问题不大,但是也花费一定时间进行了检查和处理,希望能够帮助有同样困惑的小伙伴。

相关推荐
燃先生._.10 分钟前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
2401_857600953 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600953 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL3 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
轻口味3 小时前
Vue.js 核心概念:模板、指令、数据绑定
vue.js
2402_857583494 小时前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js
java_heartLake4 小时前
Vue3之性能优化
javascript·vue.js·性能优化
ddd君317746 小时前
组件的声明、创建、渲染
vue.js
前端没钱6 小时前
从 Vue 迈向 React:平滑过渡与关键注意点全解析
前端·vue.js·react.js
顽疲7 小时前
springboot vue 会员收银系统 含源码 开发流程
vue.js·spring boot·后端