Charles代理接口快速上手

最新推荐文章于 2024-08-11 17:21:04 发布

xjt_0901

最新推荐文章于 2024-08-11 17:21:04 发布

阅读量681

点赞数 13

分类专栏： 09.javascript相关文章标签：前端 javascript

本文链接：https://blog.csdn.net/a2274001782/article/details/140832775

版权

09.javascript相关专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Charles 是一个强大的 HTTP 调试代理工具，它可以帮助开发者查看、记录和调试 HTTP 和 HTTPS 请求。在本教程中，我们将介绍如何使用 Charles 代理来捕获和测试本地开发服务器的请求。

引言 Charles 代理的安装与初始化

Charles是一切工作的起点，我们需要下载并安装 Charles 代理。可以从 Charles 官网下载适合你操作系统的版本。

下载地址：Download a Free Trial of Charles • Charles Web Debugging Proxy

抢先永久免费体验方法：进入网址，输入任意注册名生成lincense key

https://tools.zzzmode.com/mytools/charles/

点击注册，输入相关信息即破解成功

1. 确认 Charles 代理正在运行

确保 Charles 代理已经启动并正在监听默认端口（8888）。在 Charles 的界面中，应该能够看到类似以下信息：

Proxy: 127.0.0.1:8888

2. 确认浏览器代理设置

配置系统代理

Windows:

打开 控制面板 -> 网络和共享中心 -> Internet 选项。
选择 连接 标签，然后点击 局域网设置。
勾选 为 LAN 使用代理服务器，输入地址 127.0.0.1 和端口 8888，然后点击 确定。

macOS:

打开 系统偏好设置 -> 网络。
选择当前网络连接（例如 Wi-Fi），点击 高级。
选择 代理 标签，勾选 Web 代理 (HTTP) 和 安全 Web 代理 (HTTPS)，输入地址 127.0.0.1 和端口 8888，点击 确定。

配置浏览器代理

Google Chrome:

打开 Chrome，点击右上角的菜单按钮，然后选择 设置。
向下滚动并点击 高级。
在 系统 部分，点击 打开计算机的代理设置。
按上述系统代理配置步骤进行设置。

Mozilla Firefox:

打开 Firefox，点击右上角的菜单按钮，然后选择 选项。
在 常规 面板中，向下滚动到 网络设置 部分，点击 设置。
选择 手动代理配置，输入 HTTP 代理 和 HTTPS 代理 的地址 127.0.0.1 和端口 8888，点击 确定。

附：谷歌浏览器可以直接使用SwitchyOmega插件进行浏览器代理，避免后续反复改配置

SwitchyOmega 代理教程

安装 SwitchyOmega 扩展
- 在 Chrome Web Store 中搜索并安装 SwitchyOmega 扩展。
创建新情景模式
- 打开 SwitchyOmega 扩展，点击 选项 进入配置页面。
- 在左侧菜单中选择 情景模式，然后点击 新建情景模式。
- 输入情景模式名称（例如 Charles Proxy），选择 代理服务器情景模式，然后点击 创建。
配置代理服务器
- 在新创建的情景模式（例如 Charles Proxy）中，选择 服务器 选项卡。
- 在 协议 下拉菜单中选择 HTTP。
- 在 服务器 输入框中输入 127.0.0.1。
- 在 端口 输入框中输入 8888。
- 确保 启用 复选框被选中。
- 点击 保存 按钮保存设置。
配置自动切换规则
- 返回 SwitchyOmega 主页面，选择 自动切换。
- 在右侧的 规则列表 部分，点击 添加条件。
- 在 条件 输入框中输入需要通过 Charles 代理的 URL 模式（例如 *localhost:3000/*）。
- 在 情景模式 下拉菜单中选择刚才创建的情景模式（例如 Charles Proxy）。
- 点击 保存 按钮保存规则。

3. 配置 Charles SSL 代理

如果要捕获 HTTPS 请求，请确保在 Charles 中启用了 SSL 代理，并安装 Charles 根证书：

在 Charles 中，选择 Proxy -> SSL Proxying Settings...。
在 SSL Proxying 标签中，勾选 Enable SSL Proxying。
点击 Add 按钮，在 Host 中输入 *，在 Port 中输入 *，表示捕获所有主机和端口的 HTTPS 请求。

安装 Charles 根证书

在 Charles 中，选择 Help -> SSL Proxying -> Install Charles Root Certificate。
按照提示在系统和浏览器中安装 Charles 根证书。

4. 验证设置

打开浏览器并访问 http://127.0.0.1:3000/ 或其他你希望捕获的请求地址。
在 Charles 的 Structure 面板中查看请求日志。

5. 测试示例页面

创建一个简单的 HTML 文件发送请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GET Request Test</title>
</head>
<body>
    <h1>Test GET Request</h1>
    <button id="sendRequest">Send GET Request</button>

    <script>
        document.getElementById('sendRequest').addEventListener('click', function () {
            const url = 'http://localhost.charlesproxy.com:3006';

            fetch(url, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json, text/plain, */*'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
            })
            .then(data => console.log('Success:', data))
            .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

6. 确认请求和响应

在浏览器中打开 index.html。
点击 "Send POST Request" 按钮。
在 Charles 的 Structure 面板中查看请求日志，确保请求通过代理发送并被记录。

over

注意事项
Charles 默认不捕获 localhost 或 127.0.0.1 的请求，可以通过以下策略规避

1. 使用 Charles 的「映射本地主机」功能

Charles 提供了一个内置功能，可以捕获本地主机的请求。你可以使用 Charles 的「映射本地主机」（Map Localhost）功能，将 localhost 和 127.0.0.1 的请求重定向到一个可捕获的地址。

配置步骤：

打开 Charles，选择 Proxy -> Proxy Settings...。
在 Proxy Settings 窗口中，选择 Local Map 标签。
勾选 Enable Map Localhost 选项。
添加映射规则，将 localhost 或 127.0.0.1 重定向到一个其他域名或 IP 地址。

2. 使用 Charles 的「重写工具」功能

你可以使用 Charles 的重写工具（Rewrite Tool）来捕获并重定向 localhost 或 127.0.0.1 的请求。

配置步骤：

打开 Charles，选择 Tools -> Rewrite...。
点击左下角的 Add 按钮，创建一个新的重写规则。
在 Name 字段中为该规则命名（例如 Localhost to Custom）。
点击右下角的 Add 按钮，添加一个新的重写规则。
在 Type 下拉菜单中选择 Host。
在 Match 字段中输入 localhost 或 127.0.0.1。
在 Replace 字段中输入一个自定义的域名（例如 mytest.local）。
确保勾选 Enabled 复选框，然后点击 OK 保存设置。
在 Rewrite Settings 窗口中，确保刚刚创建的规则被勾选并启用，然后点击 OK。

3. 使用 Charles 的「DNS Spoofing」功能

你也可以使用 Charles 的 DNS 欺骗功能，将 localhost 或 127.0.0.1 的请求重定向到另一个地址。

配置步骤：

打开 Charles，选择 Tools -> DNS Spoofing...。
在 DNS Spoofing 窗口中，点击 Add 按钮。
在 Host 字段中输入 localhost 或 127.0.0.1。
在 IP Address 字段中输入一个其他可捕获的 IP 地址（例如 mytest.local 的 IP 地址）。
确保勾选 Enabled 复选框，然后点击 OK 保存设置。】

4.使用localhost.charlesproxy.com代替localhost

Charles 提供了一个内置的域名 localhost.charlesproxy.com，它可以用来捕获 localhost 或 127.0.0.1 的请求。使用这个域名是最简单的方法之一，因为它不需要任何额外的配置。

通过这些方法，你可以在不修改 hosts 文件的情况下捕获 localhost 或 127.0.0.1 的请求。每种方法都有其优点，具体选择可以根据你的实际需求和偏好来决定。

xjt_0901

关注

13
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
Charles代理接口快速上手

Charles是一切工作的起点，我们需要下载并安装 Charles 代理。可以从Charles 官网下载适合你操作系统的版本。抢先永久免费体验方法：进入网址，输入任意注册名生成lincense key点击注册，输入相关信息即破解成功。
复制链接

扫一扫

专栏目录