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

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

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

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

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

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

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

2、检查sslproxy设置

如果证书没有问题，接下来就从配置上查看，通过Proxy--SSL Proxying Setting打开设置页面，检查是否勾选Enable SSL Proxying，勾选之后，点击include的add按钮，此处注意一定是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过程中遇到的问题，问题不大，但是也花费一定时间进行了检查和处理，希望能够帮助有同样困惑的小伙伴。