Introduction

You can send HTTP POST requests directly from any browser's developer console using the fetch() API. No extensions are needed. Open DevTools (F12 or Ctrl+Shift+I), go to the Console tab, and run a fetch() call with method: 'POST'. Both Chrome and Firefox support this out of the box. This article covers every method: console fetch, "Copy as fetch" replay, the Network tab's built-in editors, and the best extensions when you need more power.

Method 1: fetch() in the Console (Works Everywhere)

Open DevTools in any browser and paste this into the Console:

1fetch('https://httpbin.org/post', {
2  method: 'POST',
3  headers: {
4    'Content-Type': 'application/json'
5  },
6  body: JSON.stringify({
7    username: 'testuser',
8    action: 'login'
9  })
10})
11.then(response => response.json())
12.then(data => console.log(data))
13.catch(error => console.error('Error:', error));

This sends a POST request to httpbin.org (a free HTTP testing service) and logs the response.

Sending Form Data

1const formData = new FormData();
2formData.append('username', 'testuser');
3formData.append('password', 'secret123');
4formData.append('file', new Blob(['file content'], { type: 'text/plain' }), 'test.txt');
5
6fetch('https://httpbin.org/post', {
7  method: 'POST',
8  body: formData
9  // Note: do NOT set Content-Type header -- the browser sets it with the boundary
10})
11.then(r => r.json())
12.then(data => console.log(data));

Sending URL-Encoded Data

1fetch('https://httpbin.org/post', {
2  method: 'POST',
3  headers: {
4    'Content-Type': 'application/x-www-form-urlencoded'
5  },
6  body: new URLSearchParams({
7    username: 'testuser',
8    password: 'secret123'
9  })
10})
11.then(r => r.json())
12.then(data => console.log(data));

Using async/await (Cleaner Syntax)

1(async () => {
2  try {
3    const response = await fetch('https://httpbin.org/post', {
4      method: 'POST',
5      headers: { 'Content-Type': 'application/json' },
6      body: JSON.stringify({ key: 'value' })
7    });
8    const data = await response.json();
9    console.log('Status:', response.status);
10    console.log('Body:', data);
11  } catch (err) {
12    console.error(err);
13  }
14})();

Method 2: Copy and Replay a Request (Chrome)

Chrome lets you capture an existing network request and replay it with modifications:

1. Open DevTools (F12) and go to the Network tab.
2. Perform the action that triggers the request you want to reproduce (e.g., submit a form).
3. Find the request in the Network list.
4. Right-click the request and select Copy > Copy as fetch.
5. Go to the Console tab and paste the copied code.
6. Modify the method, headers, or body as needed, then press Enter.

The copied fetch includes all cookies and headers from the original request, which is especially useful for authenticated endpoints.

Example of Copied Fetch Output

1fetch("https://example.com/api/users", {
2  "headers": {
3    "accept": "application/json, text/plain, */*",
4    "accept-language": "en-US,en;q=0.9",
5    "content-type": "application/json",
6    "cookie": "session=abc123; csrf=xyz789",
7    "x-csrf-token": "xyz789"
8  },
9  "referrer": "https://example.com/dashboard",
10  "referrerPolicy": "strict-origin-when-cross-origin",
11  "body": "{\"name\":\"New User\",\"email\":\"[email protected]\"}",
12  "method": "POST",
13  "mode": "cors",
14  "credentials": "include"
15});

You can change the body, method, or any header and re-run it.

Method 3: Firefox Network Tab "Edit and Resend"

Firefox has a built-in request editor that Chrome does not:

1. Open DevTools (F12) and go to the Network tab.
2. Capture the request by performing the action.
3. Right-click the request and select Edit and Resend.
4. A panel opens where you can modify:
   • HTTP method (GET, POST, PUT, DELETE, etc.)
   • URL
   • Headers
   • Request body
5. Click Send to execute the modified request.
6. The response appears in the Network tab.

This is the fastest way to modify and replay requests without writing any code. It is a Firefox-exclusive feature.

Method 4: Chrome's "Fetch/XHR" Filter + Override

For repeated testing against the same endpoint:

1. In the Network tab, filter by Fetch/XHR to see only API calls.
2. Right-click any request and choose Copy > Copy as cURL (bash).
3. Paste into a terminal or modify and use in the console.

Copy as cURL Example

1curl 'https://example.com/api/data' \
2  -H 'content-type: application/json' \
3  -H 'cookie: session=abc123' \
4  --data-raw '{"query":"search term"}' \
5  --compressed

This is useful when you need to share the exact request with a colleague or automate it in a script.

Method 5: Browser Extensions

For workflows that require saved collections, environment variables, or team sharing, use a dedicated tool:

When to Use an Extension vs. Console

Use the console when:

• You need a quick one-off request
• You want to test against the current page's cookies/session
• You are debugging CORS or cookie issues

Use an extension or standalone tool when:

• You need to save and organize requests into collections
• You test the same API endpoints repeatedly
• You need features like environment variables, pre-request scripts, or automated tests
• You work in a team and need to share request definitions

Handling CORS Issues

When sending POST requests from the console, you may encounter CORS (Cross-Origin Resource Sharing) errors:

Access to fetch at 'https://api.example.com' from origin 'https://different-site.com'
has been blocked by CORS policy

Solutions

1. Send from the correct origin. Navigate to the target site first, then use the console. Requests from the same origin bypass CORS.
2. Use the "Copy as fetch" approach. Since it preserves the original request's origin and credentials, CORS issues are less likely.
3. Use a proxy or standalone tool. Postman and curl do not enforce CORS because they are not browsers.

// If you're on https://example.com, fetching https://example.com/api works
// Fetching https://other-site.com/api will trigger CORS unless the server allows it

Request/Response Inspection

After sending a request from the console, inspect the full response in the Network tab:

1. Send your fetch() call in the Console.
2. Switch to the Network tab.
3. Find the request (it will appear at the bottom of the list).
4. Click on it to see:
   • Headers: Request and response headers
   • Payload/Request: The body you sent
   • Preview: Formatted response body
   • Response: Raw response body
   • Timing: Connection, TTFB, and download times

Common Pitfalls

• Forgetting that console fetch uses the page's cookies. If you are on https://example.com, your fetch call to https://example.com/api will include that site's cookies. This can be useful (testing authenticated endpoints) or problematic (accidentally performing actions as your logged-in user).
• Setting Content-Type with FormData. When using FormData, do NOT set the Content-Type header manually. The browser must set it to multipart/form-data with the correct boundary string. Setting it yourself will break file uploads.
• Not checking the Network tab for the response. console.log only shows what you explicitly log. The Network tab shows the full response headers, status code, and timing.
• Trying to send POST from the address bar. The address bar only sends GET requests. There is no way to change the HTTP method from the address bar.
• CORS blocking cross-origin requests. The browser enforces CORS on fetch() calls. If you need to test a third-party API, use curl, Postman, or navigate to the API's own domain first.

Summary

• The fastest way to send a POST request from a browser is fetch() in the DevTools console. No extensions needed.
• Chrome's "Copy as fetch" lets you capture, modify, and replay any request from the Network tab.
• Firefox's "Edit and Resend" provides a GUI editor for modifying requests without writing code.
• Use FormData for file uploads and form submissions. Do not manually set the Content-Type header with FormData.
• For repeated API testing, use Postman, Thunder Client, or Hoppscotch for saved collections and team sharing.
• Always inspect responses in the Network tab for full headers, status codes, and timing information.