Build HTTP requests with custom headers, auth, and body formats. Test APIs, analyze responses, and generate code. Client-side processing.
Retrieve data without modifying it. Safe and idempotent.
Use case: Fetch user profile, get list of products, search results
Create new resources or submit data. Not idempotent.
Use case: Create user account, submit form, upload file
Replace entire resource. Idempotent.
Use case: Update complete user profile, replace document
Partially update resource. Not necessarily idempotent.
Use case: Update email address, change password
Remove resource. Idempotent.
Use case: Delete user account, remove item from cart
Get headers only without body. Safe and idempotent.
Use case: Check if resource exists, get content length
1
API Development & Testing:
Test your API endpoints during development, validate request/response formats, and debug integration issues.
2
Third-Party API Integration:
Explore and test third-party APIs before integrating them into your application. Verify authentication flows and data formats.
3
Learning HTTP & REST APIs:
Experiment with different HTTP methods, headers, and body formats to understand how web APIs work.
4
Debugging Client Issues:
Reproduce and troubleshoot issues reported by frontend or mobile apps by testing the exact API calls they make.
5
Code Generation:
Quickly generate working code snippets in cURL, JavaScript, Python, and other languages for your documentation or implementation.
Method: GET
URL: https://jsonplaceholder.typicode.com/posts/1
No headers or body required
This retrieves a single post from a free testing API. Try it to see a successful 200 OK response with JSON data.
Method: POST
URL: https://jsonplaceholder.typicode.com/posts
Headers:
Content-Type: application/json
Body:
Creates a new post. The API will respond with the created resource including an auto-generated ID.
Method: GET
URL: https://api.github.com/user
Authentication: Bearer Token
Token: your_github_token_here
Retrieves your GitHub user profile using Bearer token authentication. Replace with your actual GitHub personal access token.
Format Content-Type When to Use
JSON application/json Modern REST APIs, complex data structures, nested objects/arrays
Form Data multipart/form-data File uploads, binary data, mixed text and files
URL Encoded application/x-www-form-urlencoded Traditional HTML form submissions, simple key-value pairs
Raw/Text text/plain, text/xml, etc. XML, plain text, custom formats, SOAP APIs
• — Always use HTTPS when sending sensitive data like passwords, API keys, or personal information. HTTP traffic is unencrypted and can be intercepted.
• — Never commit credentials to version control. Use environment variables for API keys and tokens.
• — Basic Auth over HTTP is particularly dangerous as credentials are only Base64 encoded (not encrypted).
• — This tool is client-side - your requests go directly from your browser to the API. No data is stored or logged by this website.
• — Use testing APIs like JSONPlaceholder, httpbin.org, or ReqRes.in for learning and experimentation instead of production APIs with real credentials.
CORS Error: "Access blocked by CORS policy"
Cause: The API server doesn't allow requests from this domain.
Solutions:
The API must set Access-Control-Allow-Origin headers
Use the generated cURL command in your terminal (bypasses CORS)
For development, configure your API to allow your domain
Use a CORS proxy for testing (not for production)
401 Unauthorized or 403 Forbidden
Cause: Missing or invalid authentication credentials.
Solutions:
Verify your API key, token, or password is correct
Check the authentication type matches what the API expects
Ensure the Authorization header is properly formatted
For Bearer tokens, make sure there's a space after "Bearer"
Check if your token has expired or lacks required permissions
400 Bad Request or Invalid JSON
Cause: Malformed request data or missing required fields.
Solutions:
Validate your JSON syntax using a JSON validator
Check for trailing commas in JSON (not allowed)
Ensure all required fields are included in the request body
Verify data types match what the API expects (string vs number)
Check the API documentation for the exact request format
Network Error or Request Timeout
Cause: Cannot reach the server or server took too long to respond.
Solutions:
Check the URL is correct and the server is online
Verify your internet connection is working
Check for typos in the domain name
If using localhost, ensure your dev server is running
Try accessing the URL directly in your browser first
Construct HTTP requests with custom headers, body, and authentication. Test APIs without writing code.
See status, headers, body, timing, and size. Format JSON responses automatically.
HTTP (Hypertext Transfer Protocol) is the foundation of data communication on the web. Every time you visit a website or use an API, HTTP requests and responses are exchanged between clients (browsers, apps) and servers.
Every HTTP request consists of:
Every HTTP response consists of:
Status codes are three-digit numbers that indicate the result of an HTTP request. They're grouped into five categories:
The request was successfully received, understood, and accepted.
Further action is needed to complete the request.
The request contains bad syntax or cannot be fulfilled.
The server failed to fulfill a valid request.
APIs use various authentication methods to verify client identity and authorize access. Here are the most common approaches:
Most common for modern APIs, especially OAuth 2.0 and JWT-based authentication.
How it works:
Authorization: Bearer {token}When to use: Modern APIs, OAuth 2.0, JWT tokens, mobile apps, SPAs
Security: Token should be short-lived; use HTTPS; never commit tokens to source control
Simple username and password authentication using base64 encoding.
How it works:
username:password as base64Authorization: Basic {base64}When to use: Simple APIs, development, internal tools, initial authentication to get token
Security: Must use HTTPS (credentials are only encoded, not encrypted); consider as legacy for public APIs
Simple key-based authentication, often for service-to-service communication.
How it works:
X-API-Key: {key}) or query parameterWhen to use: Third-party integrations, public APIs with usage tracking, service accounts
Security: Treat like passwords; rotate regularly; use different keys for dev/prod; monitor usage
Industry-standard protocol for authorization, used by major platforms (Google, GitHub, etc.).
How it works:
When to use: Third-party integrations, user data access, delegated authorization, social login
Security: Use PKCE for mobile/SPA; validate state parameter; short-lived access tokens with refresh tokens
Some APIs use proprietary authentication schemes.
Examples:
When to use: When required by specific API
Security: Follow API documentation carefully; understand signature generation; use official SDKs when available
Debugging API requests efficiently requires a systematic approach. Follow these best practices to identify and resolve issues quickly.
Begin with the simplest possible request and add complexity incrementally.
Basic debugging flow:
This isolates exactly what's causing the failure.
Error messages contain valuable information - don't skip them!
What to look for:
Ensure your request matches API expectations.
Common format issues:
Authentication errors (401, 403) are common but usually straightforward to fix.
401 Unauthorized checklist:
403 Forbidden checklist:
When stuck, compare your request with known working examples.
Resources to check:
Response headers provide important clues beyond the status code.
Useful headers to check:
Eliminate variables to identify the root cause.
Isolation techniques:
Browser developer tools provide deep insights.
What to check:
APIs often implement rate limiting to prevent abuse.
Rate limit strategies:
Keep a debugging log to identify patterns.
What to document:
This builds a personal knowledge base for faster debugging in the future.
❌ Don't guess - Read error messages and documentation ❌ Don't ignore status codes - They tell you where to look ❌ Don't skip validation - Validate JSON before sending ❌ Don't reuse tokens indefinitely - Check expiration ❌ Don't test in production first - Use dev/staging environments ❌ Don't hardcode credentials - Use environment variables
When a request fails, check in this order:
CORS is a browser security feature that can block requests from this tool to certain APIs. Understanding CORS is essential for web-based API testing.
CORS (Cross-Origin Resource Sharing) is a browser security mechanism that restricts web pages from making requests to domains different from the one serving the page.
Origin = Protocol + Domain + Port
Examples:
https://inventivehq.com:443 (this tool)https://api.example.com:443 (target API)Without CORS, malicious websites could make requests to any API using your credentials (cookies, tokens) stored in the browser. CORS prevents this by requiring APIs to explicitly allow cross-origin requests.
Origin: https://inventivehq.com headerAccess-Control-Allow-Origin header*), browser allows the responseRequest headers:
Origin: https://inventivehq.com - Where request is coming fromAccess-Control-Request-Method: PUT - Intended method (preflight)Access-Control-Request-Headers: authorization - Custom headers (preflight)Response headers:
Access-Control-Allow-Origin: * - Allowed origins (or specific domain)Access-Control-Allow-Methods: GET, POST, PUT - Allowed methodsAccess-Control-Allow-Headers: authorization - Allowed custom headersAccess-Control-Allow-Credentials: true - Allow cookies/authAccess-Control-Max-Age: 3600 - Cache preflight response (seconds)CORS Error Messages:
Common Causes:
If you control the API, add CORS headers to responses:
Access-Control-Allow-Origin: https://inventivehq.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
Install a CORS extension to disable CORS checks during testing.
⚠️ Warning: Only use for development! Never disable CORS in production.
Popular extensions:
Desktop tools (Postman, Insomnia, cURL) aren't subject to CORS because they're not browsers.
When to use:
Route requests through a server you control to bypass browser CORS.
How it works:
⚠️ Security: Only proxy to APIs you trust. Proxies can see credentials.
❌ Bad:
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
✓ Good:
Access-Control-Allow-Origin: https://inventivehq.com
Access-Control-Allow-Credentials: true
Only allow what's necessary:
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization
Respond to OPTIONS requests with appropriate CORS headers and 200 status.
Use Access-Control-Max-Age to reduce preflight requests:
Access-Control-Max-Age: 86400
Don't just echo the Origin header. Validate against allowlist:
const allowedOrigins = [
"https://inventivehq.com",
"https://app.example.com"
];
if (allowedOrigins.includes(request.headers.origin)) {
response.headers["Access-Control-Allow-Origin"] = request.headers.origin;
}
Use this tool to test CORS behavior:
Check browser developer tools Network tab for:
CORS doesn't prevent unauthorized access - it only controls which origins can access responses in a browser.
While this tool helps test APIs, professional development and integration can save time and prevent security issues. Our experts provide custom API development (REST, GraphQL), third-party API integration, security hardening, performance optimization, comprehensive documentation, and ongoing maintenance.
An HTTP request builder is a tool that helps developers construct, send, and analyze HTTP requests to APIs. It provides a user-friendly interface to configure URLs, methods, headers, authentication, and request bodies without writing code. This tool runs entirely in your browser, sending requests directly to the target API while providing detailed response analysis including status codes, headers, timing information, and formatted body content.
CORS (Cross-Origin Resource Sharing) is a browser security feature that blocks requests from web pages to different domains. If the API you're testing doesn't explicitly allow requests from inventivehq.com, the browser will block it. Solutions include: (1) Using browser extensions during development to disable CORS checks, (2) Testing with desktop tools like Postman that aren't subject to CORS restrictions, (3) Configuring the API to allow inventivehq.com in its CORS allowlist, or (4) Using a proxy server to route requests (some tools offer this feature).
Click the "Auth" tab in the request builder, select your authentication type (Bearer Token, Basic Auth, API Key, or OAuth 2.0), and enter your credentials. The tool will automatically add the appropriate headers to your request. For Bearer tokens, it adds "Authorization: Bearer {token}". For Basic Auth, it base64-encodes your username:password and adds "Authorization: Basic {encoded}". For API keys, you can choose whether to add it as a header (typically X-API-Key) or as a query parameter.
Yes! Use Collections to organize related requests. Create a collection (e.g., "User API", "Payment Endpoints"), add requests to it, and save it for future use. Collections support folder structure for nested organization, collection-level authentication (applied to all requests), and collection-level base URLs. You can export collections as JSON to share with your team or import collections from others. All collections are stored locally in your browser's localStorage for privacy.
GET is used to retrieve data from a server (read-only operation), while POST is used to send data to create new resources (write operation). GET requests typically don't have a body and parameters are sent in the URL query string. POST requests include data in the request body (usually JSON, XML, or form data). Other methods include PUT (update/replace entire resource), PATCH (partially update resource), DELETE (remove resource), and OPTIONS (query allowed methods, used for CORS preflight).
Use Environments to define variables for different contexts. Create environments like "Development" and "Production" with different values for BASE_URL, API_KEY, and other configuration. Then use variable placeholders like {{BASE_URL}}/users in your requests. Switch between environments using the environment selector dropdown, and the tool will automatically replace variables with values from the active environment. This prevents mistakes like testing against production accidentally.
All requests are sent directly from your browser to the target API - we never see or store your request data. The tool runs entirely client-side using JavaScript. History, collections, and environments are stored locally in your browser's localStorage and never leave your device. We don't track URLs, headers, request bodies, or any sensitive information. However, always be cautious with production credentials and consider clearing history after testing with sensitive data.
Yes! After configuring your request, click the "Code" button to generate equivalent code in various languages and libraries. Supported options include: JavaScript (Fetch API, Axios, XMLHttpRequest, jQuery), Python (Requests, http.client, aiohttp), cURL, PHP (cURL, Guzzle), Java (HttpURLConnection, OkHttp), C# (HttpClient, RestSharp), Go (net/http), and Ruby (Net::HTTP, HTTParty). The generated code includes syntax highlighting, copy button, and download option. You can paste it directly into your application.
401 Unauthorized means you're not authenticated - your credentials are missing or invalid. This typically requires you to add or fix authentication (Bearer token, Basic Auth, API key). 403 Forbidden means you're authenticated but don't have permission to access the resource. Your credentials are valid, but your account lacks the necessary permissions or scope. Check with the API administrator to grant appropriate permissions. Other common status codes: 200 OK (success), 400 Bad Request (invalid syntax), 404 Not Found (resource doesn't exist), 500 Internal Server Error (server error).
Select "Form Data" (multipart/form-data) as the body type, add a field row, and choose "File" as the type. Then select a file from your computer using the file picker. The tool will automatically set the correct Content-Type header (multipart/form-data) and handle the file upload. You can combine files with regular form fields in the same request. The tool shows visual file size indicators and auto-detects content types for uploaded files.
Request headers are metadata sent with HTTP requests that provide information about the request, client, and desired response format. Common headers include: Content-Type (format of request body, e.g., application/json), Accept (desired response format), Authorization (authentication credentials), User-Agent (client information), and Origin (for CORS). Headers control authentication, caching, cookies, CORS, content negotiation, and security. The tool provides header autocomplete for common headers, validation warnings for deprecated headers, and security warnings when sending credentials over HTTP.
Start by checking the status code: 4xx errors are client errors (check your request), 5xx errors are server errors (check API status). Read the error message carefully - many APIs provide detailed error descriptions in the response body. For authentication errors (401/403), verify your credentials and permissions. For 400 Bad Request, check JSON syntax and required fields. For CORS errors, see the CORS troubleshooting guide. Use the Response Inspector to examine headers for clues. Test with a minimal request first, then add complexity. Compare working requests from API documentation. Check the API's developer console or logs if you have access.
Detect and analyze CORS misconfigurations that could lead to data exposure and security breaches. Test origin validation, credential handling, and policy implementation.
Decode and inspect JWT tokens instantly. View header, payload, and verify signatures with security validation.
Format, validate, and beautify JSON data with syntax highlighting and error detection
Encode and decode Base64 strings for data transport, email attachments, and web development
Free URL encoder/decoder with auto-detection. Encode/decode URLs, parse query strings, and break down URL components. Perfect for APIs, web development, and debugging.