How to send a POST request using Fetch in JavaScript? (API Integration)

The main reason why fetch POST body does not work is that the Content-Type is not set or the body format does not match: JSON requires headers to be set to 'application/json' and the body to use JSON.stringify(); form data uses URLSearchParams; FormData does not set Content-Type manually.

When fetch() sends a POST request, the body does not take effect?

The most common reason is that Content-Type request header is not set, or body format does not match the backend expectation. The browser will not automatically complete the request header for you, nor will it convert the object into a JSON string.

• headers: { 'Content-Type': 'application/json' } , otherwise the backend may not receive body or the parsing may fail.
• body must be a string (such as JSON.stringify({name: 'Alice'}) ), and objects cannot be passed directly
• If the backend requires form data ( application/x-www-form-urlencoded ), you must use new URLSearchParams({name: 'Alice'}) to construct body
• Note: fetch() does not have cookies by default. When crossing domains, you need to add credentials: 'include' to send credentials.

POST is successful but the backend cannot receive the parameters? Check these points

The phenomenon is usually a response status code of 200, but req.body in the backend log is an empty object or undefined - this is almost always a front-end serialization or request header issue.

• In the Node.js Express scenario, confirm that the backend has app.use(express.json()) and/or app.use(express.urlencoded({ extended: true }))
• The front-end passes application/json , but the back-end is only equipped with urlencoded middleware → Baifa
• When using FormData to pass files or mixed fields on the front end, don’t set Content-Type header and let the browser automatically generate the boundary (manually setting it will destroy the format)
• Use curl -v or the Network panel of the browser DevTools to see the actual request headers and raw bodies, which is much more reliable than guessing.

fetch POST reports TypeError: Failed to fetch?

This error name is misleading. It does not necessarily indicate a network failure, but more likely CORS, HTTPS mixed content, or the request was intercepted by the browser.

• Non-2xx status codes (such as 401, 500) will not trigger catch , but will go through then . You must manually check response.ok or response.status
• CORS errors usually display "No 'Access-Control-Allow-Origin' header" on the console. At this time, the problem is configured on the server side. Adding mode: 'cors' on the front end is useless.
• Requests initiated under the local file protocol ( file:// ) will be directly rejected by the browser and must be run on a local service (such as http://localhost )
• If the backend returns HTML (such as a login jump page) but the frontend parses it as JSON, response.json() will throw a syntax error, which looks like a fetch failure.

Should I use async/await? How to avoid .catch swallowing errors

It is more intuitive to use async/await , but don't forget that the successful response fetch() may also be a business error (such as 400 with error message), which cannot be caught purely by try/catch .

• Recommended structure: const res = await fetch(url, options); if (!res.ok) throw new Error(`${res.status} ${res.statusText}`); return res.json();
• Don't write fetch().then(...).catch(err => console.error(err)) - this will swallow all subsequent errors in the chain, including .json() failures
• If you need to unify error handling, encapsulate a layer of functions, do status judgment and JSON parsing, and then throw contextual errors (for example, including url and body )
• Note: await only waits for promise to settle and does not guarantee business success; network timeout needs to be controlled by AbortController

The real trouble is never how to send POST, but that the back-end interface document does not clearly state the expected Content-Type, field nesting level, whether an authentication header is required, or even quietly changes the path - capture the packet first when encountering a problem, don't rush to change the front-end logic.

The above is the detailed content of How to send a POST request using Fetch in JavaScript? (API Integration). For more information, please follow other related articles on the PHP Chinese website!