REST API 测试客户端：开发调试的“万能遥控器”

前后端分离开发时，前端等后端接口写完才能联调，后端等前端写完才能测试，双方干等。后来我用 curl 在命令行里测，但每次要写一堆参数，记不住。于是我做了一个在线的 REST API 测试客户端，支持 GET、POST、PUT、DELETE、PATCH，可以自定义 Headers 和 Body，还能格式化响应 JSON。这篇文章详细介绍这个工具的使用方法，以及如何自己实现一个类似的客户端（含前端代码和后端代理示例）。

本文工具由 VidDown 提供 —— 一个目前免费、无需登录、纯前端处理的在线工具集。除了 API 测试，还提供视频解析、JSON 格式化、PDF 合并等 20+ 实用功能。
🔧 本文专属工具：REST API 测试客户端

一、这个工具能做什么？

REST API 测试客户端用于向任何 HTTP 端点发送请求，并查看响应详情。

支持常见 HTTP 方法：GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS。
自定义请求头：以 JSON 格式输入，如 {"Authorization": "Bearer token", "Content-Type": "application/json"}。
请求体支持：适用于 POST、PUT、PATCH 等方法，可输入 JSON、文本或表单数据。
响应展示：状态码、响应头、响应体（自动高亮或格式化）。
本地处理：前端直接发送 fetch 请求，不经过第三方服务器。

适用场景：
- 开发时测试自己写的 API 是否正常。
- 调试第三方接口，确认请求格式和返回数据。
- 学习 HTTP 协议，观察不同方法、状态码的行为。

二、如何使用这个工具？

2.1 基本步骤

选择 HTTP 方法：从下拉框中选择（默认 GET）。
输入 URL：完整的 API 地址，例如 https://jsonplaceholder.typicode.com/posts/1。
（可选）填写请求头：以 JSON 对象格式输入，例如 {"Authorization": "Bearer 123"}。工具会自动解析并设置到请求中。
（可选）填写请求体：对于 POST/PUT/PATCH，可在文本框输入请求体内容，支持 JSON、XML、纯文本等。
点击 「发送请求」，右侧显示响应状态码和响应体。

2.2 注意事项

CORS 限制：由于浏览器的同源策略，直接从前端发送请求到跨域 API 可能会被阻止。解决方案：
使用支持 CORS 的 API（如 jsonplaceholder.typicode.com）。
通过后端代理转发请求（本工具暂未内置代理，但下文会给出代理代码）。
请求体格式：如果 Content-Type 为 application/json，请确保输入合法的 JSON 字符串。

三、完整代码实现（从零搭建一个 API 测试客户端）

如果你也想自己实现一个类似的工具，以下是完整的前端代码（HTML + JS）以及可选的 CORS 代理后端。

3.1 前端核心：发送 HTTP 请求（使用 `fetch`）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>REST API 测试客户端</title>
    <style>
        /* 简单样式，可自行调整 */
        * { box-sizing: border-box; }
        body { font-family: monospace; padding: 20px; }
        .container { display: flex; gap: 20px; flex-wrap: wrap; }
        .request-panel { flex: 1; min-width: 300px; }
        .response-panel { flex: 1; min-width: 300px; background: #f5f5f5; padding: 10px; border-radius: 5px; }
        textarea, input, select { width: 100%; margin-bottom: 10px; padding: 8px; font-family: monospace; }
        pre { white-space: pre-wrap; background: #fff; padding: 10px; border-radius: 4px; }
        button { background: #007bff; color: white; border: none; padding: 8px 16px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>REST API 测试客户端</h1>
    <div class="container">
        <div class="request-panel">
            <select id="method">
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="DELETE">DELETE</option>
                <option value="PATCH">PATCH</option>
            </select>
            <input type="text" id="url" placeholder="https://api.example.com/endpoint" value="https://jsonplaceholder.typicode.com/posts/1">
            <textarea id="headers" rows="3" placeholder='请求头 (JSON格式)&#10;{"Content-Type": "application/json"}'>{}</textarea>
            <textarea id="body" rows="5" placeholder='请求体 (Body)'></textarea>
            <button id="sendBtn">发送请求</button>
        </div>
        <div class="response-panel">
            <h3>响应状态码: <span id="status">-</span></h3>
            <pre id="response">等待请求...</pre>
        </div>
    </div>

    <script>
        const sendBtn = document.getElementById('sendBtn');
        const methodEl = document.getElementById('method');
        const urlEl = document.getElementById('url');
        const headersEl = document.getElementById('headers');
        const bodyEl = document.getElementById('body');
        const statusSpan = document.getElementById('status');
        const responsePre = document.getElementById('response');

        sendBtn.addEventListener('click', async () => {
            const method = methodEl.value;
            const url = urlEl.value.trim();
            let headers = {};
            try {
                headers = JSON.parse(headersEl.value || '{}');
            } catch(e) {
                alert('请求头 JSON 格式错误');
                return;
            }
            const body = bodyEl.value;

            try {
                const fetchOptions = {
                    method,
                    headers,
                };
                if (method !== 'GET' && method !== 'HEAD') {
                    fetchOptions.body = body;
                }
                const response = await fetch(url, fetchOptions);
                statusSpan.innerText = `${response.status} ${response.statusText}`;
                const responseText = await response.text();
                // 尝试格式化 JSON
                try {
                    const json = JSON.parse(responseText);
                    responsePre.innerText = JSON.stringify(json, null, 2);
                } catch {
                    responsePre.innerText = responseText;
                }
            } catch (error) {
                statusSpan.innerText = '请求失败';
                responsePre.innerText = error.message;
                console.error(error);
            }
        });
    </script>
</body>
</html>

3.2 解决 CORS 问题：Node.js 代理服务器

如果前端直接请求遇到 CORS 错误，可以设置一个后端代理来转发请求。以下是一个简单的 Express 代理：

// proxy-server.js
const express = require('express');
const cors = require('cors');
const axios = require('axios');

const app = express();
app.use(cors());                // 允许所有跨域请求
app.use(express.json());       // 解析 JSON 请求体
app.use(express.text());       // 解析纯文本

// 代理端点
app.all('/proxy', async (req, res) => {
    const { method, url, headers, body } = req.body;
    try {
        const response = await axios({
            method,
            url,
            headers,
            data: body,
            validateStatus: () => true   // 任何状态码都接受
        });
        res.json({
            status: response.status,
            statusText: response.statusText,
            headers: response.headers,
            data: response.data
        });
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

app.listen(3000, () => console.log('Proxy server running on port 3000'));

前端修改 fetch 请求指向代理服务器：

const proxyUrl = 'http://localhost:3000/proxy';
const response = await fetch(proxyUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ method, url, headers, body })
});
const result = await response.json();
statusSpan.innerText = `${result.status} ${result.statusText}`;
responsePre.innerText = typeof result.data === 'object' ? JSON.stringify(result.data, null, 2) : result.data;

四、踩坑汇总（真实遇到过）

预检请求（OPTIONS）失败
现象：POST 请求时浏览器先发 OPTIONS 请求，后端没有正确响应，导致实际请求被阻止。
解决：后端需要设置响应头 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers。如果是代理服务器，则转发时可以绕过。
请求头中的 Content-Type 不正确
现象：后端无法解析请求体，返回 400 或 415。
解决：确保手动设置的 Content-Type 与实际请求体格式一致。例如发送 JSON 数据时，设置 "Content-Type": "application/json"。
响应体很大导致页面卡顿
现象：接口返回几 MB 的 JSON，浏览器渲染慢。
解决：限制响应体显示大小（截断），或使用虚拟滚动。本工具目前会完整显示，但建议测试时选择合适接口。
携带 Cookie 的跨域请求
场景：需要发送携带认证 Cookie 的请求。
解决：在 fetch 中添加 credentials: 'include'，同时后端必须设置 Access-Control-Allow-Credentials: true 且 Access-Control-Allow-Origin 不能为 *。本工具默认不携带，高级功能可扩展。

五、与同类工具对比

工具	优点	缺点
本工具	轻量、免费、无登录、代码开源	不支持自动保存历史、无环境变量
Postman	功能强大，环境管理，自动化测试	重量级，需安装客户端
Insomnia	开源，支持 GraphQL	同上
curl 命令行	极轻量，脚本化	学习曲线，参数难记

本工具适合临时快速测试，尤其是当你不方便打开 Postman 或在手机上需要测一个 API 时。

六、后续可能的增强

请求历史记录：保存最近发送的请求，方便复用。
环境变量：支持 {{baseUrl}} 等变量替换。
响应体语法高亮：对 JSON/XML/HTML 进行着色。
请求超时控制：可设置超时时间（默认依赖浏览器）。

七、总结

REST API 测试客户端是开发调试的必备工具。通过本文提供的代码，你可以轻松搭建一个自己的测试工具，或使用 VidDown 上的现成版本。

如果你还没试过，现在就去 https://www.viddown.cn/tools/rest-api-client/ 体验一下。

关于 VidDown
VidDown 还提供视频解析下载、JSON 格式化、PDF 合并、SSL 证书检查、随机数据生成等 20+ 工具。所有工具目前免费，大部分纯前端本地处理。
🔗 主站：https://www.viddown.cn

赞助支持

邮箱登录

REST API 测试客户端：开发调试的“万能遥控器”

REST API 测试客户端：开发调试的“万能遥控器”

一、这个工具能做什么？

二、如何使用这个工具？

2.1 基本步骤

2.2 注意事项

三、完整代码实现（从零搭建一个 API 测试客户端）

3.1 前端核心：发送 HTTP 请求（使用 fetch）

3.2 解决 CORS 问题：Node.js 代理服务器

四、踩坑汇总（真实遇到过）

五、与同类工具对比

六、后续可能的增强

七、总结

相关推荐

📝 关于技术博客

3.1 前端核心：发送 HTTP 请求（使用 `fetch`）