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）。 - 通过后端代理转发请求（本工具暂未内置代理，但下文会给出代理代码）。
- 使用支持 CORS 的 API（如
- 请求体格式：如果 Content-Type 为
application/json，请确保输入合法的 JSON 字符串。
三、完整代码实现（从零搭建一个 API 测试客户端）
如果你也想自己实现一个类似的工具，以下是完整的前端代码（HTML + JS）以及可选的 CORS 代理后端。
3.1 前端核心：发送 HTTP 请求（使用fetch）
<!DOCTYPEhtml><html><head><metacharset="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><divclass="container"><divclass="request-panel"><selectid="method"><optionvalue="GET">GET</option><optionvalue="POST">POST</option><optionvalue="PUT">PUT</option><optionvalue="DELETE">DELETE</option><optionvalue="PATCH">PATCH</option></select><inputtype="text"id="url"placeholder="https://api.example.com/endpoint"value="https://jsonplaceholder.typicode.com/posts/1"><textareaid="headers"rows="3"placeholder='请求头 (JSON格式) {"Content-Type": "application/json"}'>{}</textarea><textareaid="body"rows="5"placeholder='请求体 (Body)'></textarea><buttonid="sendBtn">发送请求</button></div><divclass="response-panel"><h3>响应状态码:<spanid="status">-</span></h3><preid="response">等待请求...</pre></div></div><script>constsendBtn=document.getElementById('sendBtn');constmethodEl=document.getElementById('method');consturlEl=document.getElementById('url');constheadersEl=document.getElementById('headers');constbodyEl=document.getElementById('body');conststatusSpan=document.getElementById('status');constresponsePre=document.getElementById('response');sendBtn.addEventListener('click',async()=>{constmethod=methodEl.value;consturl=urlEl.value.trim();letheaders={};try{headers=JSON.parse(headersEl.value||'{}');}catch(e){alert('请求头 JSON 格式错误');return;}constbody=bodyEl.value;try{constfetchOptions={method,headers,};if(method!=='GET'&&method!=='HEAD'){fetchOptions.body=body;}constresponse=awaitfetch(url,fetchOptions);statusSpan.innerText=`${response.status}${response.statusText}`;constresponseText=awaitresponse.text();// 尝试格式化 JSONtry{constjson=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.jsconstexpress=require('express');constcors=require('cors');constaxios=require('axios');constapp=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{constresponse=awaitaxios({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 请求指向代理服务器：
constproxyUrl='http://localhost:3000/proxy';constresponse=awaitfetch(proxyUrl,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({method,url,headers,body})});constresult=awaitresponse.json();statusSpan.innerText=`${result.status}${result.statusText}`;responsePre.innerText=typeofresult.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/ 体验一下。
