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!DOCTYPEhtmlhtmlheadmetacharsetUTF-8titleREST API 测试客户端/titlestyle/* 简单样式可自行调整 */*{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/headbodyh1REST API 测试客户端/h1divclasscontainerdivclassrequest-panelselectidmethodoptionvalueGETGET/optionoptionvaluePOSTPOST/optionoptionvaluePUTPUT/optionoptionvalueDELETEDELETE/optionoptionvaluePATCHPATCH/option/selectinputtypetextidurlplaceholderhttps://api.example.com/endpointvaluehttps://jsonplaceholder.typicode.com/posts/1textareaidheadersrows3placeholder请求头 (JSON格式)#10;{Content-Type: application/json}{}/textareatextareaidbodyrows5placeholder请求体 (Body)/textareabuttonidsendBtn发送请求/button/divdivclassresponse-panelh3响应状态码:spanidstatus-/span/h3preidresponse等待请求.../pre/div/divscriptconstsendBtndocument.getElementById(sendBtn);constmethodEldocument.getElementById(method);consturlEldocument.getElementById(url);constheadersEldocument.getElementById(headers);constbodyEldocument.getElementById(body);conststatusSpandocument.getElementById(status);constresponsePredocument.getElementById(response);sendBtn.addEventListener(click,async(){constmethodmethodEl.value;consturlurlEl.value.trim();letheaders{};try{headersJSON.parse(headersEl.value||{});}catch(e){alert(请求头 JSON 格式错误);return;}constbodybodyEl.value;try{constfetchOptions{method,headers,};if(method!GETmethod!HEAD){fetchOptions.bodybody;}constresponseawaitfetch(url,fetchOptions);statusSpan.innerText${response.status}${response.statusText};constresponseTextawaitresponse.text();// 尝试格式化 JSONtry{constjsonJSON.parse(responseText);responsePre.innerTextJSON.stringify(json,null,2);}catch{responsePre.innerTextresponseText;}}catch(error){statusSpan.innerText请求失败;responsePre.innerTexterror.message;console.error(error);}});/script/body/html3.2 解决 CORS 问题Node.js 代理服务器如果前端直接请求遇到 CORS 错误可以设置一个后端代理来转发请求。以下是一个简单的 Express 代理// proxy-server.jsconstexpressrequire(express);constcorsrequire(cors);constaxiosrequire(axios);constappexpress();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{constresponseawaitaxios({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 请求指向代理服务器constproxyUrlhttp://localhost:3000/proxy;constresponseawaitfetch(proxyUrl,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({method,url,headers,body})});constresultawaitresponse.json();statusSpan.innerText${result.status}${result.statusText};responsePre.innerTexttypeofresult.dataobject?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/ 体验一下。
REST API 测试客户端：开发调试的“万能遥控器”（附完整代码实现）
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!DOCTYPEhtmlhtmlheadmetacharsetUTF-8titleREST API 测试客户端/titlestyle/* 简单样式可自行调整 */*{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/headbodyh1REST API 测试客户端/h1divclasscontainerdivclassrequest-panelselectidmethodoptionvalueGETGET/optionoptionvaluePOSTPOST/optionoptionvaluePUTPUT/optionoptionvalueDELETEDELETE/optionoptionvaluePATCHPATCH/option/selectinputtypetextidurlplaceholderhttps://api.example.com/endpointvaluehttps://jsonplaceholder.typicode.com/posts/1textareaidheadersrows3placeholder请求头 (JSON格式)#10;{Content-Type: application/json}{}/textareatextareaidbodyrows5placeholder请求体 (Body)/textareabuttonidsendBtn发送请求/button/divdivclassresponse-panelh3响应状态码:spanidstatus-/span/h3preidresponse等待请求.../pre/div/divscriptconstsendBtndocument.getElementById(sendBtn);constmethodEldocument.getElementById(method);consturlEldocument.getElementById(url);constheadersEldocument.getElementById(headers);constbodyEldocument.getElementById(body);conststatusSpandocument.getElementById(status);constresponsePredocument.getElementById(response);sendBtn.addEventListener(click,async(){constmethodmethodEl.value;consturlurlEl.value.trim();letheaders{};try{headersJSON.parse(headersEl.value||{});}catch(e){alert(请求头 JSON 格式错误);return;}constbodybodyEl.value;try{constfetchOptions{method,headers,};if(method!GETmethod!HEAD){fetchOptions.bodybody;}constresponseawaitfetch(url,fetchOptions);statusSpan.innerText${response.status}${response.statusText};constresponseTextawaitresponse.text();// 尝试格式化 JSONtry{constjsonJSON.parse(responseText);responsePre.innerTextJSON.stringify(json,null,2);}catch{responsePre.innerTextresponseText;}}catch(error){statusSpan.innerText请求失败;responsePre.innerTexterror.message;console.error(error);}});/script/body/html3.2 解决 CORS 问题Node.js 代理服务器如果前端直接请求遇到 CORS 错误可以设置一个后端代理来转发请求。以下是一个简单的 Express 代理// proxy-server.jsconstexpressrequire(express);constcorsrequire(cors);constaxiosrequire(axios);constappexpress();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{constresponseawaitaxios({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 请求指向代理服务器constproxyUrlhttp://localhost:3000/proxy;constresponseawaitfetch(proxyUrl,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({method,url,headers,body})});constresultawaitresponse.json();statusSpan.innerText${result.status}${result.statusText};responsePre.innerTexttypeofresult.dataobject?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/ 体验一下。
