-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapi-tester.html
More file actions
198 lines (175 loc) · 32.2 KB
/
Copy pathapi-tester.html
File metadata and controls
198 lines (175 loc) · 32.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CT8E5N460D"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-CT8E5N460D');</script>
<title>API Tester - Free Online HTTP Client | No Ads, No Signup</title>
<meta name="description" content="Free online API tester for HTTP request debugging. Send GET/POST/PUT/DELETE with headers and JSON body in browser. ✅ No ads ✅ No signup ✅ No limits.">
<meta name="keywords" content="api tester, http client online, postman alternative, rest api test, no ads, no signup, no login, no watermark, free unlimited, browser-based, no installation, local processing">
<meta name="author" content="UseMagicTools">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
<meta name="googlebot" content="index, follow"><meta name="bingbot" content="index, follow">
<meta name="revisit-after" content="7 days"><meta name="rating" content="general"><meta name="distribution" content="global"><meta name="language" content="en">
<link rel="canonical" href="https://www.usemagictools.com/api-tester.html">
<link rel="alternate" hreflang="en" href="https://www.usemagictools.com/api-tester.html"><link rel="alternate" hreflang="zh-CN" href="https://www.usemagictools.com/api-tester.html"><link rel="alternate" hreflang="fr" href="https://www.usemagictools.com/api-tester.html"><link rel="alternate" hreflang="es" href="https://www.usemagictools.com/api-tester.html"><link rel="alternate" hreflang="x-default" href="https://www.usemagictools.com/api-tester.html">
<meta property="og:type" content="website"><meta property="og:url" content="https://www.usemagictools.com/api-tester.html"><meta property="og:title" content="API Tester - Free Online HTTP Client | No Ads, No Signup"><meta property="og:description" content="Test REST APIs with headers, body, and response inspector."><meta property="og:image" content="https://www.usemagictools.com/screenshots/api-tester-v1.webp"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:locale" content="en_US"><meta property="og:locale:alternate" content="zh_CN"><meta property="og:site_name" content="Magic Toolbox">
<meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@usemagictools"><meta name="twitter:creator" content="@usemagictools"><meta name="twitter:title" content="API Tester - Free Online HTTP Client | No Ads, No Signup"><meta name="twitter:description" content="Browser-based API testing tool for REST workflows."><meta name="twitter:image" content="https://www.usemagictools.com/screenshots/api-tester-v1.webp">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebApplication","name":"API Tester","alternateName":["API 测试器","HTTP Client Online","Postman Alternative"],"url":"https://www.usemagictools.com/api-tester.html","description":"Free online API tester and HTTP request client in browser.","inLanguage":["en","zh-CN","fr","es"],"applicationCategory":"DeveloperApplication","operatingSystem":"Web Browser","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"author":{"@type":"Person","name":"UseMagicTools"},"publisher":{"@type":"Organization","name":"Web Toolbox","url":"https://www.usemagictools.com/"},"featureList":["GET POST PUT PATCH DELETE support","Headers and JSON body editor","Response status and timing","Copy response quickly","No ads","No signup required","No watermark","100% browser-based","Unlimited usage"],"screenshot":"https://www.usemagictools.com/screenshots/api-tester-v1.webp"}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.usemagictools.com/"},{"@type":"ListItem","position":2,"name":"API Tester","item":"https://www.usemagictools.com/api-tester.html"}]}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to Test API Online","totalTime":"PT1M","step":[{"@type":"HowToStep","position":1,"name":"Fill URL and method","text":"Choose HTTP method and input endpoint URL."},{"@type":"HowToStep","position":2,"name":"Set headers and body","text":"Add JSON headers and request body if needed."},{"@type":"HowToStep","position":3,"name":"Send and inspect","text":"Click Send Request and inspect status, headers, and response body."}]}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is an API tester and when should I use it?","acceptedAnswer":{"@type":"Answer","text":"An API tester is an HTTP client used to send requests and inspect responses from REST APIs. Developers use it for endpoint debugging, payload validation, integration checks, and quick backend smoke tests."}},{"@type":"Question","name":"Does this tool support GET, POST, PUT, PATCH, DELETE?","acceptedAnswer":{"@type":"Answer","text":"Yes. This free API tester supports all common HTTP methods including GET, POST, PUT, PATCH, and DELETE. You can configure custom request headers, query parameters, and JSON body payloads for comprehensive API workflow testing. Everything runs directly in your browser with no signup required, making it ideal for quick REST API debugging sessions."}},{"@type":"Question","name":"Why do some APIs fail with CORS error in browser?","acceptedAnswer":{"@type":"Answer","text":"Browser API testing follows CORS rules. If target server does not allow your origin, request may fail in frontend context. This is a browser security behavior, not a bug in the tester."}},{"@type":"Question","name":"Can I copy and reuse response JSON quickly?","acceptedAnswer":{"@type":"Answer","text":"Yes. The response panel supports one-click copy for the entire JSON payload. You can quickly reuse response data in debugging workflows, API documentation, mock server setup, and data transformation pipelines. This browser-based tool requires no ads or signup, streamlining your development process with instant clipboard access."}},{"@type":"Question","name":"Is this tool really free with no ads?","acceptedAnswer":{"@type":"Answer","text":"Yes, 100% free with no ads, no registration, no watermark, and no usage limits. All processing happens locally in your browser — your data is never uploaded to any server."}}]}</script>
<style>
:root{--bg:#020617;--panel:#0f172a;--panel2:#111827;--text:#e2e8f0;--muted:#94a3b8;--border:rgba(148,163,184,.22);--pri:#06b6d4;--pri2:#0284c7;--radius:14px}
*{box-sizing:border-box;margin:0;padding:0} body{font-family:"Space Grotesk","Segoe UI",sans-serif;background:radial-gradient(1000px 500px at 10% -10%,rgba(6,182,212,.22),transparent 55%),radial-gradient(900px 420px at 95% 0,rgba(34,197,94,.14),transparent 55%),#020617;color:var(--text);min-height:100vh;padding:24px 16px 60px}
.container{max-width:1200px;padding:40px;margin:0 auto}h1{text-align:center;font-size:2.2rem;background:linear-gradient(120deg,#22d3ee,#38bdf8,#86efac);-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{text-align:center;color:var(--muted);margin:10px 0 20px}
.card{background:linear-gradient(180deg,rgba(17,24,39,.9),rgba(15,23,42,.88));border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 16px 36px rgba(0,0,0,.35)}
.tool{padding:14px}.row{display:grid;grid-template-columns:140px 1fr auto;gap:10px;align-items:center}.sel,input,textarea,pre{font-family:inherit}.sel,input,textarea{width:100%;border:1px solid var(--border);background:#020617;color:var(--text);border-radius:10px;padding:10px}.buttons{display:flex;gap:8px;flex-wrap:wrap}.btn{border:1px solid var(--border);background:#0a1322;color:var(--text);padding:10px 12px;border-radius:10px;cursor:pointer}.btn.primary{background:linear-gradient(135deg,var(--pri),var(--pri2));border-color:transparent;color:#fff}.btn:hover{transform:translateY(-1px)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.panel{border:1px solid var(--border);border-radius:12px;background:rgba(2,6,23,.54);padding:10px;min-height:240px}.panel h3{font-size:14px;margin-bottom:8px;color:#bae6fd}.meta{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0;color:#93c5fd;font-size:13px}.resp{white-space:pre-wrap;word-break:break-word;max-height:330px;overflow:auto;background:#020617;border:1px solid var(--border);border-radius:10px;padding:10px;font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.55}
.status{font-size:13px;min-height:18px;color:#93c5fd;margin-top:8px}
.features-section,.faq-section,.related-tools{margin-top:30px}
.features-section h2,.faq-section h2,.related-tools h3{margin:0 0 16px;font-size:1.2rem}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feature{border:1px solid var(--border);border-radius:10px;padding:12px;background:rgba(2,6,23,.54)}.feature p{color:var(--muted);font-size:13px;line-height:1.55}.feature h4{margin:8px 0 6px;font-size:14px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.related-card{border:1px solid var(--border);border-radius:10px;padding:12px;background:rgba(2,6,23,.54);text-decoration:none;color:inherit;display:block}.related-card:hover{border-color:#22d3ee}.related-card p{color:var(--muted);font-size:13px;line-height:1.55}.related-card h4{margin:8px 0 6px;font-size:14px}
.faq-item{border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden;background:rgba(2,6,23,.5)}.faq-question{width:100%;text-align:left;background:transparent;border:0;color:var(--text);padding:12px 14px;font-size:14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.faq-question::after{content:'+';font-size:18px;transition:transform .2s}.faq-item.active .faq-question::after{transform:rotate(45deg)}.faq-answer{display:none;padding:0 14px 12px;color:var(--muted);font-size:13px;line-height:1.6}.faq-item.active .faq-answer{display:block}
[data-reveal]{opacity:0;transform:translateY(12px);animation:up .6s ease forwards}[data-reveal="2"]{animation-delay:.08s}[data-reveal="3"]{animation-delay:.16s}[data-reveal="4"]{animation-delay:.24s}@keyframes up{to{opacity:1;transform:none}}
.cors-row{display:flex;align-items:center;gap:12px;margin-top:10px;padding:8px 12px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.15);border-radius:10px}
.cors-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:500;white-space:nowrap;user-select:none}
.cors-toggle input{display:none}
.cors-slider{width:36px;height:20px;background:rgba(148,163,184,.25);border-radius:10px;position:relative;transition:background .25s}
.cors-slider::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:#94a3b8;border-radius:50%;transition:all .25s}
.cors-toggle input:checked+.cors-slider{background:var(--pri)}
.cors-toggle input:checked+.cors-slider::after{left:18px;background:#fff}
.cors-hint{font-size:12px;color:var(--muted);line-height:1.4}
@media (max-width:980px){.grid{grid-template-columns:1fr}.row{grid-template-columns:1fr}}
@media (max-width:960px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.features-grid{grid-template-columns:1fr}.container{padding:20px}.cors-row{flex-direction:column;align-items:flex-start}}
</style>
<link rel="stylesheet" href="common/common.css">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>
<body>
<div class="container">
<h1 data-i18n="title">API Tester</h1>
<p class="subtitle" data-i18n="subtitle">Test REST APIs online with headers and JSON body</p>
<section class="card tool" data-reveal="1">
<div class="row">
<select id="method" class="sel"><option>GET</option><option>POST</option><option>PUT</option><option>PATCH</option><option>DELETE</option></select>
<input id="url" data-i18n-placeholder="urlPh" placeholder="https://api.example.com/users">
<div class="buttons"><button class="btn primary" id="sendBtn" data-i18n="send">Send Request</button><button class="btn" id="copyBtn" data-i18n="copy">Copy Response</button></div>
</div>
<div class="cors-row">
<label class="cors-toggle">
<input type="checkbox" id="corsProxy">
<span class="cors-slider"></span>
<span data-i18n="corsLabel">CORS Proxy</span>
</label>
<span class="cors-hint" data-i18n="corsHint">Enable if you get CORS errors. Routes request through a public proxy.</span>
</div>
<div class="grid">
<div class="panel"><h3 data-i18n="headers">Headers (JSON)</h3><textarea id="headersIn" style="height:220px" spellcheck="false">{"Content-Type":"application/json"}</textarea></div>
<div class="panel"><h3 data-i18n="body">Request Body</h3><textarea id="bodyIn" style="height:220px" data-i18n-placeholder="bodyPh" placeholder='{"name":"Alice"}' spellcheck="false"></textarea></div>
</div>
<div class="meta"><span id="statusCode">Status: -</span><span id="timeCost">Time: -</span><span id="sizeInfo">Size: -</span></div>
<div class="panel"><h3 data-i18n="response">Response</h3><pre id="responseOut" class="resp">{}</pre></div>
<div class="status" id="status"></div>
</section>
<div class="trust-bar" data-reveal="2"><span class="trust-item" data-i18n="trust_users">🌍 Used by 50,000+ users</span><span class="trust-item" data-i18n="trust_rating">⭐ 4.9/5 rating</span><span class="trust-item" data-i18n="trust_privacy">🔒 100% Private</span><span class="trust-item" data-i18n="trust_free">🚫 No Ads, No Signup</span></div>
<section class="features-section" data-reveal="3"><h2 data-i18n="features_title">API Tester Features</h2><div class="features-grid"><article class="feature"><div>🔒</div><h4 data-i18n="f1_t">100% Free & Private</h4><p data-i18n="f1_d">No ads, no signup, no watermark. API debugging runs in your browser with local session state.</p></article><article class="feature"><div>🧪</div><h4 data-i18n="f2_t">HTTP Request Lab</h4><p data-i18n="f2_d">Test GET, POST, PUT, PATCH, DELETE endpoints and inspect response payload quickly.</p></article><article class="feature"><div>🧾</div><h4 data-i18n="f3_t">Headers & JSON Body</h4><p data-i18n="f3_d">Edit headers and request body using JSON input for REST API integration workflows.</p></article><article class="feature"><div>⚡</div><h4 data-i18n="f4_t">Fast Response Inspector</h4><p data-i18n="f4_d">Track status code, response time, payload size, then copy response in one click.</p></article></div></section>
<section class="faq-section" data-reveal="4"><h2 data-i18n="faq_title">Frequently Asked Questions</h2>
<div class="faq-item"><button class="faq-question" data-i18n="faq1_q">What is an API tester and when should I use it?</button><div class="faq-answer" data-i18n="faq1_a">An API tester is an HTTP client used to send requests and inspect responses from REST APIs. Developers use it for endpoint debugging, payload validation, integration checks, and quick backend smoke tests.</div></div>
<div class="faq-item"><button class="faq-question" data-i18n="faq2_q">Does this tool support GET, POST, PUT, PATCH, DELETE?</button><div class="faq-answer" data-i18n="faq2_a">Yes. You can test common HTTP methods including GET, POST, PUT, PATCH, and DELETE. You can also configure request headers and JSON body for API workflows.</div></div>
<div class="faq-item"><button class="faq-question" data-i18n="faq3_q">Why do some APIs fail with CORS error in browser?</button><div class="faq-answer" data-i18n="faq3_a">Browser API testing follows CORS rules. If target server does not allow your origin, request may fail in frontend context. This is a browser security behavior, not a bug in the tester.</div></div>
<div class="faq-item"><button class="faq-question" data-i18n="faq4_q">Can I copy and reuse response JSON quickly?</button><div class="faq-answer" data-i18n="faq4_a">Yes. Response panel supports one-click copy. You can reuse response payload in debugging, documentation, mock setup, and data transformation flows.</div></div>
<div class="faq-item"><button class="faq-question" data-i18n="faq_free_q">Is this tool really free with no ads?</button><div class="faq-answer" data-i18n="faq_free_a">Yes, 100% free with no ads, no registration, no watermark, and no usage limits. All processing happens locally in your browser — your data is never uploaded to any server.</div></div>
</section>
<section class="related-tools" data-reveal="4"><h3 data-i18n="relatedToolsTitle">Related Tools</h3><div class="related-grid"><a class="related-card" href="json-viewer.html"><div>📋</div><h4 data-i18n="relatedTool1">JSON Viewer</h4><p data-i18n="relatedTool1Desc">Inspect and pretty-print response JSON payload.</p></a><a class="related-card" href="websocket-tester.html"><div>🔌</div><h4 data-i18n="relatedTool2">WebSocket Tester</h4><p data-i18n="relatedTool2Desc">Debug realtime socket communication workflows.</p></a><a class="related-card" href="csv-json.html"><div>🔁</div><h4 data-i18n="relatedTool3">CSV JSON Converter</h4><p data-i18n="relatedTool3Desc">Transform API output for data processing.</p></a><a class="related-card" href="url-encoder.html"><div>🔗</div><h4 data-i18n="relatedTool4">URL Encoder</h4><p data-i18n="relatedTool4Desc">Encode query parameters for API requests.</p></a></div></section>
</div>
<script>
(function(){
'use strict';
var i18n={
en:{tool_name:'API Tester',back:'Back to Toolbox',title:'API Tester',subtitle:'Test REST APIs online with headers and JSON body',urlPh:'https://api.example.com/users',send:'Send Request',copy:'Copy Response',headers:'Headers (JSON)',body:'Request Body',bodyPh:'{"name":"Alice"}',response:'Response',sending:'Sending request...',copied:'Response copied',invalidHeader:'Invalid headers JSON',invalidBody:'Invalid JSON body',err:'Request failed',corsLabel:'CORS Proxy',corsHint:'Enable if you get CORS errors. Routes request through a public proxy.',corsErr:'CORS blocked — enable the "CORS Proxy" toggle above and retry.',trust_users:'🌍 Used by 50,000+ users',trust_rating:'⭐ 4.9/5 rating',trust_privacy:'🔒 100% Private',trust_free:'🚫 No Ads, No Signup',features_title:'API Tester Features',f1_t:'100% Free & Private',f1_d:'No ads, no signup, no watermark. API debugging runs in your browser with local session state.',f2_t:'HTTP Request Lab',f2_d:'Test GET, POST, PUT, PATCH, DELETE endpoints and inspect response payload quickly.',f3_t:'Headers & JSON Body',f3_d:'Edit headers and request body using JSON input for REST API integration workflows.',f4_t:'Fast Response Inspector',f4_d:'Track status code, response time, payload size, then copy response in one click.',faq_title:'Frequently Asked Questions',faq1_q:'What is an API tester and when should I use it?',faq1_a:'An API tester is an HTTP client used to send requests and inspect responses from REST APIs. Developers use it for endpoint debugging, payload validation, integration checks, and quick backend smoke tests.',faq2_q:'Does this tool support GET, POST, PUT, PATCH, DELETE?',faq2_a:'Yes. You can test common HTTP methods including GET, POST, PUT, PATCH, and DELETE. You can also configure request headers and JSON body for API workflows.',faq3_q:'Why do some APIs fail with CORS error in browser?',faq3_a:'Browser API testing follows CORS rules. If target server does not allow your origin, request may fail in frontend context. This is a browser security behavior, not a bug in the tester.',faq4_q:'Can I copy and reuse response JSON quickly?',faq4_a:'Yes. Response panel supports one-click copy. You can reuse response payload in debugging, documentation, mock setup, and data transformation flows.',faq_free_q:'Is this tool really free with no ads?',faq_free_a:'Yes, 100% free with no ads, no registration, no watermark, and no usage limits. All processing happens locally in your browser — your data is never uploaded to any server.',relatedToolsTitle:'Related Tools',relatedTool1:'JSON Viewer',relatedTool1Desc:'Inspect and pretty-print response JSON payload.',relatedTool2:'WebSocket Tester',relatedTool2Desc:'Debug realtime socket communication workflows.',relatedTool3:'CSV JSON Converter',relatedTool3Desc:'Transform API output for data processing.',relatedTool4:'URL Encoder',relatedTool4Desc:'Encode query parameters for API requests.'},
'zh-CN':{tool_name:'API 测试器',back:'返回工具箱',title:'API 测试器',subtitle:'在线测试 REST API，请求头与 JSON Body 一体化调试',urlPh:'https://api.example.com/users',send:'发送请求',copy:'复制响应',headers:'请求头（JSON）',body:'请求体',bodyPh:'{"name":"Alice"}',response:'响应结果',sending:'请求发送中...',copied:'响应已复制',invalidHeader:'请求头 JSON 格式错误',invalidBody:'请求体 JSON 格式错误',err:'请求失败',corsLabel:'CORS 代理',corsHint:'遇到跨域错误时开启，请求将通过公共代理转发。',corsErr:'CORS 跨域被拦截 — 请开启上方「CORS 代理」开关后重试。',trust_users:'🌍 超过 50,000 用户使用',trust_rating:'⭐ 4.9/5 好评',trust_privacy:'🔒 100% 隐私安全',trust_free:'🚫 无广告、无需注册',features_title:'API 测试器功能',f1_t:'100% 免费且安全',f1_d:'无广告、无需注册、无水印。API 调试在浏览器内完成。',f2_t:'HTTP 请求实验室',f2_d:'支持 GET/POST/PUT/PATCH/DELETE 常见接口调试。',f3_t:'请求头与 JSON Body',f3_d:'可编辑 headers 与 body，适合 REST 接口联调。',f4_t:'快速响应分析',f4_d:'实时查看状态码、耗时、大小并一键复制响应。',faq_title:'常见问题',faq1_q:'什么是 API 测试器？适合什么场景？',faq1_a:'API 测试器是一个 HTTP 客户端，用于向 REST API 发送请求并查看响应。常用于接口联调、参数验证、后端冒烟测试和问题排查。',faq2_q:'支持 GET、POST、PUT、PATCH、DELETE 吗？',faq2_a:'支持。你可以选择常见 HTTP 方法，并配置请求头和 JSON 请求体来测试接口行为。',faq3_q:'为什么有些请求会出现 CORS 错误？',faq3_a:'浏览器环境会执行 CORS 安全策略。若目标服务未开放跨域来源，前端请求会被拦截，这是浏览器安全机制。',faq4_q:'响应 JSON 可以快速复制复用吗？',faq4_a:'可以。响应面板支持一键复制，便于文档编写、Mock 构造和后续数据处理。',faq_free_q:'这个工具真的免费且无广告吗？',faq_free_a:'是的，100% 免费，无广告、无需注册、无水印、无限制。所有处理都在浏览器本地完成，你的数据不会上传到任何服务器。',relatedToolsTitle:'相关工具',relatedTool1:'JSON 查看器',relatedTool1Desc:'格式化并查看响应 JSON。',relatedTool2:'WebSocket 测试器',relatedTool2Desc:'调试实时通信接口。',relatedTool3:'CSV JSON 转换',relatedTool3Desc:'处理 API 输出数据。',relatedTool4:'URL 编解码',relatedTool4Desc:'编码接口查询参数。'},
fr:{tool_name:'API Tester',back:'Retour à la boîte à outils',title:'API Tester',subtitle:'Tester les API REST en ligne avec headers et JSON body',urlPh:'https://api.example.com/users',send:'Envoyer',copy:'Copier réponse',headers:'Headers (JSON)',body:'Body requête',bodyPh:'{"name":"Alice"}',response:'Réponse',sending:'Envoi en cours...',copied:'Réponse copiée',invalidHeader:'JSON headers invalide',invalidBody:'JSON body invalide',err:'Échec de la requête',corsLabel:'Proxy CORS',corsHint:'Activer en cas d\'erreur CORS. La requête passe par un proxy public.',corsErr:'CORS bloqué — activez le toggle « Proxy CORS » ci-dessus et réessayez.',trust_users:'🌍 Utilisé par 50 000+ utilisateurs',trust_rating:'⭐ Note 4.9/5',trust_privacy:'🔒 100% Privé',trust_free:'🚫 Sans pub, sans inscription',features_title:'Fonctions API Tester',f1_t:'100% Gratuit et Privé',f1_d:'Sans publicité, sans inscription, sans filigrane. Debug API dans navigateur.',f2_t:'Laboratoire HTTP',f2_d:'Tester GET/POST/PUT/PATCH/DELETE rapidement.',f3_t:'Headers et JSON body',f3_d:'Editer headers et body pour workflows REST.',f4_t:'Inspecteur de réponse',f4_d:'Voir status, temps, taille et copier la réponse.',faq_title:'Questions fréquentes',faq1_q:'Qu est ce qu un API tester ?',faq1_a:'Un API tester est un client HTTP pour envoyer des requêtes REST et inspecter les réponses. Il est utile pour debugging et validation d intégration.',faq2_q:'Supporte GET POST PUT PATCH DELETE ?',faq2_a:'Oui. Méthodes HTTP courantes prises en charge avec headers et JSON body.',faq3_q:'Pourquoi erreur CORS dans navigateur ?',faq3_a:'Le navigateur applique les règles CORS. Si serveur n autorise pas l origine, la requête frontend est bloquée.',faq4_q:'Puis-je copier rapidement la réponse JSON ?',faq4_a:'Oui. Le panneau réponse propose copie en un clic pour documentation et data workflows.',faq_free_q:'Cet outil est-il vraiment gratuit et sans pub ?',faq_free_a:'Oui, 100% gratuit, sans publicité, sans inscription, sans filigrane et sans limites. Tout est traité localement dans votre navigateur — vos données ne sont jamais téléversées.',relatedToolsTitle:'Outils associés',relatedTool1:'Visionneur JSON',relatedTool1Desc:'Visualiser le payload JSON.',relatedTool2:'Testeur WebSocket',relatedTool2Desc:'Déboguer flux temps réel.',relatedTool3:'Convertisseur CSV JSON',relatedTool3Desc:'Transformer données de réponse.',relatedTool4:'Encodeur URL',relatedTool4Desc:'Encoder paramètres API.'},
es:{tool_name:'API Tester',back:'Volver a la caja de herramientas',title:'API Tester',subtitle:'Prueba APIs REST en línea con headers y JSON body',urlPh:'https://api.example.com/users',send:'Enviar',copy:'Copiar respuesta',headers:'Headers (JSON)',body:'Body de solicitud',bodyPh:'{"name":"Alice"}',response:'Respuesta',sending:'Enviando solicitud...',copied:'Respuesta copiada',invalidHeader:'JSON de headers inválido',invalidBody:'JSON body inválido',err:'Error de solicitud',corsLabel:'Proxy CORS',corsHint:'Activa si recibes errores CORS. La solicitud se envía a través de un proxy público.',corsErr:'CORS bloqueado — activa el toggle "Proxy CORS" arriba y reintenta.',trust_users:'🌍 Usado por más de 50,000 usuarios',trust_rating:'⭐ Calificación 4.9/5',trust_privacy:'🔒 100% Privado',trust_free:'🚫 Sin anuncios, sin registro',features_title:'Funciones API Tester',f1_t:'100% Gratis y Privado',f1_d:'Sin anuncios, sin registro, sin marca de agua. Debug API en navegador.',f2_t:'Laboratorio HTTP',f2_d:'Prueba GET/POST/PUT/PATCH/DELETE en segundos.',f3_t:'Headers y JSON body',f3_d:'Edita headers y body para flujos REST.',f4_t:'Inspector de respuesta',f4_d:'Ve status, tiempo, tamaño y copia resultado.',faq_title:'Preguntas frecuentes',faq1_q:'¿Qué es un API tester?',faq1_a:'Un API tester es un cliente HTTP para enviar solicitudes REST e inspeccionar respuestas. Es útil para depuración y validación de integraciones.',faq2_q:'¿Soporta GET POST PUT PATCH DELETE?',faq2_a:'Sí. Incluye métodos HTTP comunes con headers y body JSON.',faq3_q:'¿Por qué aparece error CORS en navegador?',faq3_a:'El navegador aplica reglas CORS. Si el servidor no permite tu origen, la solicitud frontend se bloquea.',faq4_q:'¿Puedo copiar rápidamente la respuesta JSON?',faq4_a:'Sí. El panel de respuesta tiene copia en un clic para documentación y flujos de datos.',faq_free_q:'¿Esta herramienta es realmente gratis y sin anuncios?',faq_free_a:'Sí, 100% gratis, sin anuncios, sin registro, sin marca de agua y sin límites. Todo el procesamiento ocurre localmente en tu navegador: tus datos nunca se suben a ningún servidor.',relatedToolsTitle:'Herramientas relacionadas',relatedTool1:'Visor JSON',relatedTool1Desc:'Inspecciona payload JSON.',relatedTool2:'Probador WebSocket',relatedTool2Desc:'Depura comunicación en tiempo real.',relatedTool3:'Convertidor CSV JSON',relatedTool3Desc:'Transforma datos de respuesta.',relatedTool4:'Codificador URL',relatedTool4Desc:'Codifica parámetros API.'}
};
function t(k){var lang=typeof WebToolbox!=='undefined'?WebToolbox.getCurrentLang():'en';var d=i18n[lang]||i18n.en;return d[k]||i18n.en[k]||k;}
function setStatus(v){document.getElementById('status').textContent=v||'';}
function parseJsonInput(input, fallback){var txt=input.trim();if(!txt)return fallback;return JSON.parse(txt);}
var CORS_PROXIES=[
function(u){return 'https://corsproxy.io/?'+encodeURIComponent(u);},
function(u){return 'https://api.allorigins.win/raw?url='+encodeURIComponent(u);}
];
async function sendRequest(){
var method=document.getElementById('method').value;
var url=document.getElementById('url').value.trim();
if(!url){setStatus('URL required');return;}
var headers, bodyObj;
try{headers=parseJsonInput(document.getElementById('headersIn').value,'');if(headers==='')headers={};}catch(_){setStatus(t('invalidHeader'));return;}
var bodyTxt=document.getElementById('bodyIn').value.trim();
try{if(bodyTxt)bodyObj=JSON.parse(bodyTxt);}catch(_){setStatus(t('invalidBody'));return;}
var useProxy=document.getElementById('corsProxy').checked;
var targetUrl=url;
if(useProxy){targetUrl=CORS_PROXIES[0](url);}
setStatus(t('sending'));
var start=performance.now();
try{
var options={method:method,headers:headers};
if(bodyTxt && method!=='GET' && method!=='DELETE'){options.body=JSON.stringify(bodyObj);}
var res=await fetch(targetUrl,options);
var raw=await res.text();
var out=raw;
try{out=JSON.stringify(JSON.parse(raw),null,2);}catch(_){/* text */}
document.getElementById('responseOut').textContent=out;
document.getElementById('statusCode').textContent='Status: '+res.status+' '+res.statusText;
document.getElementById('timeCost').textContent='Time: '+Math.round(performance.now()-start)+'ms';
document.getElementById('sizeInfo').textContent='Size: '+new Blob([raw]).size+' bytes';
setStatus('OK');
}catch(err){
var isCors=err.message&&(err.message.indexOf('Failed to fetch')!==-1||err.message.indexOf('NetworkError')!==-1||err.message.indexOf('CORS')!==-1||err.message.indexOf('ERR_FAILED')!==-1);
/* CORS 代理开启时第一个失败，自动尝试备用代理 */
if(useProxy&&isCors&&CORS_PROXIES.length>1){
try{
var fallbackUrl=CORS_PROXIES[1](url);
var options2={method:method,headers:headers};
if(bodyTxt&&method!=='GET'&&method!=='DELETE'){options2.body=JSON.stringify(bodyObj);}
var res2=await fetch(fallbackUrl,options2);
var raw2=await res2.text();
var out2=raw2;
try{out2=JSON.stringify(JSON.parse(raw2),null,2);}catch(_){}
document.getElementById('responseOut').textContent=out2;
document.getElementById('statusCode').textContent='Status: '+res2.status+' '+res2.statusText;
document.getElementById('timeCost').textContent='Time: '+Math.round(performance.now()-start)+'ms';
document.getElementById('sizeInfo').textContent='Size: '+new Blob([raw2]).size+' bytes';
setStatus('OK (fallback proxy)');
return;
}catch(_){}
}
document.getElementById('responseOut').textContent=String(err);
document.getElementById('statusCode').textContent='Status: Error';
document.getElementById('timeCost').textContent='Time: -';
document.getElementById('sizeInfo').textContent='Size: -';
if(isCors&&!useProxy){
setStatus(t('corsErr'));
}else{
setStatus(t('err')+': '+err.message);
}
}
}
document.getElementById('sendBtn').addEventListener('click',sendRequest);
document.getElementById('copyBtn').addEventListener('click',function(){navigator.clipboard.writeText(document.getElementById('responseOut').textContent||'').then(function(){setStatus(t('copied'));});});
window._translations=i18n;
})();
</script>
<script src="common/common.js" data-tool-id="api-tester" data-tool-name="API Tester" data-category="developer"></script>
<script>WebToolbox.init(window._translations);</script>
</body>
</html>