example of Fetch_API with body and URLSearchParams is invalid in both browser chrome and nodejs

[NewUserHa]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

copy from the documention:

const response = await fetch("https://example.org/post", {
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  // Automatically converted to "username=example&password=password"
  body: new URLSearchParams({ username: "example", password: "password" }),
  // ...
});

this code doesn't work in both browser chrome and nodejs, and both throw error "Uncaught TypeError TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body."

What did you expect to see?

it works

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/api/fetch_api/using_fetch
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/fetch_api/using_fetch/index.md
• Last commit: bd4e1b0
• Document last modified: 2025-02-09T22:21:09.000Z

[Josh-Cena]

I missed the method: "POST" option. Welcoming a PR to add it.

[NewUserHa]

what about also adding a new example for method: "POST" ratherthan fetch(url+"?"+new URLSearchParams({ username: "example", password: "password" }))

[Josh-Cena]

Oh actually, I reread this section, and what we are showing now is intended. This is not a complete code example that you can just copy and run; it only shows the parts relevant to our discussion. A complete POST request example is shown as late as https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#making_post_requests

[NewUserHa]

but this code block is not marked as red(error) status like the one below it

[Josh-Cena]

It's not intending to show "bad code". The // ... tells you that it's incomplete, with more content intending to come afterwards.

[NewUserHa]

that // ... looks to be difficulty to understand, if it is incomplete code, then at least the code should be incomplete with invalid statement ... instead of valid // ...

[Josh-Cena]

I agree with you that it's hard to read. Shall we update all examples containing a body to use method: "POST"? There are many on this page.

[NewUserHa]

the API references pages are good to read, these other pages are like tutories and usually too long to read for quick reference, it should be better to at least have good practice examples

[wbamberg]

This would take some careful rework IMO. The idea of this part of the guide is that it introduces three options, one at a time. It's not intentional that you can make a complete request at each stage. Then it shows how to combine them to make a complete POST request.

So if it's minimally changed to make a complete POST request at the point the body is introduced, then the next bit is incoherent.

[Josh-Cena]

Shall we introduce the method first, then, since we talk about methods when we introduce the body option anyway?

[wbamberg]

We do already introduce the method first. We could delete Making POST requests, and effectively cover it earlier, so:

• when we introduce bodies we could say, for example, "note that if you include a body you must set method to POST (or whichever other methods)", and then include method:"POST" in that example
• when we introduce headers we could expand a little on the existing "for example, the Content-Type header tells the server the format of the request's body.", to say some thing on the lines of "for example, in a POST request you can use the Content-Type header to tell the server the format of the request's body.", and then include body and method in that example.

I guess I'm a bit sensitive about this page because I spent some time turning it from a morass of random facts about fetch into something organized, and I don't want it to go down that route again.

[Josh-Cena]

Yes, I think that would be a more reasonable order.