REST API 测试客户端：从手动 curl 到可视化调试
前后端分离开发中，调试 API 是家常便饭。以前我习惯打开终端敲
curl -X POST -H "Content-Type: application/json" -d '{"key":"value"}' https://api.example.com/endpoint，每次都要小心地转义引号、处理换行。更麻烦的是，有些接口需要复杂的请求头或认证，手动输入非常容易出错。后来我写了一个可视化的 API 测试工具，把请求方法、URL、Headers、Body 都变成表单，点一下就能发送并看到响应。这篇文章分享 API 测试的核心技术、CORS 问题的应对方案，以及如何自己搭建一个轻量级的测试客户端。
一、为什么需要 API 测试工具？
日常开发中，我们经常需要：
- 验证后端接口是否返回预期的状态码和数据格式。
- 调试第三方 API（如支付、短信网关）的请求与响应。
- 在编写前端代码前，先确认接口的可用性。
最简单的方案是浏览器地址栏（只支持 GET）或命令行 curl，但 curl 对新手不友好，参数繁多。可视化的 API 测试工具（如 Postman）能极大提升效率，但安装一个桌面软件又显得笨重。轻量级在线 API 测试客户端则介于两者之间：无需安装，打开浏览器即用，支持常用 HTTP 方法，还能自定义 Headers 和 Body。
二、浏览器直接发送请求的难题：CORS
前端 JavaScript 通过 fetch 或 XMLHttpRequest 发送跨域请求时，会受到浏览器同源策略的限制。如果目标 API 没有配置 CORS（跨域资源共享）响应头，请求会被浏览器拦截，控制台报错：
Access to fetch at 'https://api.example.com' from origin 'https://your-tool.com' has been blocked by CORS policy
这是在线 API 测试工具必须解决的核心问题。常见方案有两种：
- 要求用户使用支持 CORS 的测试端点（如
jsonplaceholder.typicode.com），但这不适用于生产环境 API。 - 通过后端代理转发请求：前端将请求数据发送到自己的后端服务器，后端再去请求目标 API，然后返回结果。这样就不存在跨域问题。
绝大多数在线 API 测试工具（包括 Postman 的 Web 版本）都采用后端代理方案。下面给出一个简单的 Node.js 代理实现。
三、手写一个 API 测试客户端（前端 + 代理）
3.1 前端界面核心代码
<select id="method">
<option>GET</option><option>POST</option><option>PUT</option><option>DELETE</option><option>PATCH</option>
</select>
<input type="text" id="url" placeholder="https://api.example.com/endpoint" value="https://jsonplaceholder.typicode.com/posts/1">
<textarea id="headers" placeholder='{"Content-Type":"application/json"}'></textarea>
<textarea id="body" placeholder='{"key":"value"}'></textarea>
<button id="send">发送请求</button>
<pre id="response"></pre>
document.getElementById('send').onclick = async () => {
const method = document.getElementById('method').value;
const url = document.getElementById('url').value;
let headers = {};
try {
headers = JSON.parse(document.getElementById('headers').value || '{}');
} catch(e) { alert('Headers JSON 格式错误'); return; }
const body = document.getElementById('body').value;
// 使用代理（推荐）
const proxyUrl = 'https://your-proxy-server.com/proxy';
const res = await fetch(proxyUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ method, url, headers, body })
});
const data = await res.json();
document.getElementById('response').innerText = JSON.stringify(data, null, 2);
};
3.2 后端代理（Node.js + Express）
const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json({ limit: '1mb' }));
app.use(express.text({ limit: '1mb' }));
app.use(express.urlencoded({ extended: true }));
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,
data: response.data,
headers: response.headers
});
} catch (err) {
res.status(500).json({ error: err.message });
}
});
app.listen(3000, () => console.log('Proxy running on 3000'));
部署这个代理服务器后，前端请求都发往 /proxy，由它转发给目标 API，从而绕过浏览器的 CORS 限制。
四、常见问题与解决方案
| 问题 | 原因 | 解决 |
|---|---|---|
| 请求体为 JSON 但后端收不到 | Content-Type 未设置 | 在 Headers 中显式添加 "Content-Type": "application/json" |
| 代理服务器返回 413 错误 | 请求体过大 | 增加代理服务器的 body 限制（如 limit: '10mb'） |
| 需要携带 Cookie | 跨域默认不发送 | 前端设置 credentials: 'include'，代理需转发 Cookie |
| 请求超时 | 目标 API 响应慢 | 增加 axios 超时设置（如 timeout: 30000） |
| ## 五、对比成熟的解决方案 | ||
| 工具 | 优点 | 缺点 |
| - | - | - |
| 自建轻量客户端 | 完全可控，可嵌入自己项目 | 功能简单，需维护代理 |
| Postman | 功能强大，支持环境变量、脚本 | 需安装，部分高级功能收费 |
| Insomnia | 开源，支持 GraphQL | 同样需要安装 |
| 在线 API 测试网站 | 免安装，开箱即用 | 依赖第三方服务，可能存在隐私风险 |
六、使用示例：VidDown 的 API 测试工具
如果你不想自己写代码，可以直接使用 VidDown 提供的 REST API 测试客户端。它已内置后端代理，解决了 CORS 问题，并且完全免费、无需登录。你只需要打开工具页面，选择方法、输入 URL、填写 Headers 和 Body，点击发送即可看到响应。
🔗 在线体验：https://www.viddown.cn/tools/api-client/
该工具适用于：
- 开发阶段快速验证本地或测试环境 API。
- 调试第三方回调接口（配合 Webhook 调试器更佳）。
- 学习 HTTP 协议，观察不同状态码和响应头。
七、总结
REST API 测试客户端是前后端开发中不可或缺的辅助工具。通过理解 CORS 原理和代理技术，我们可以轻松搭建自己的轻量级测试界面，也可以直接使用现有的在线服务。无论哪种方式，都能帮助我们告别繁琐的 curl 命令，以更直观的方式调试接口。
希望本文对你有所帮助。如果你对 API 测试或代理实现有任何疑问，欢迎留言交流。
本文中提到的技术方案可自行部署，所有代码示例仅供学习参考。