Thanks for reporting. That is indeed strange, I can't understand why scala-js-dom would do something different than vanilla JavaScript: it is purely a facade for the JavaScript API.

What browser are you testing with?

Can you try setting the headers in Scala.js like this:

Fetch
      .fetch(
        "/test-api",
        new RequestInit {
          method = HttpMethod.POST
          body = "key1=value1&key2=value2"
          headers = js.Dictionary("content-type" -> "application/x-www-form-urlencoded")
        }
      )

This matches your JavaScript code more closely.

Similarly, can you try changing the JavaScript code to:

var headers = new Headers();
headers.set("content-type", "application/x-www-form-urlencoded");
window.fetch('/test-api', {
  method: 'POST',
  headers: headers,
  body: 'key1=value1&key2=value2'
})

This matches the original Scala.js code that has the problem.

Please try those and let me know what happens.

Regarding URLSearchParams...

But sadly the type of request body RequestInit doesnt support this yet:

It seems we have a facade for URLSearchParams already, it just needs to be added to the union there. Would you like to make a PR? :)

Thanks @armanbilge for your detail reply, to make it easier testing, I setup a new project to demonstrate this issue here:

https://github.com/duchoang/scalajs-fetch-urlencoded/blob/main/client/src/main/scala/example/client.scala#L11

Button1 is using Headers type and button2 is using js.Dictionary type.

To run this example, you can run these sbt command:

$> sbt
sbt:scalajs-fetch-urlencoded> compile
sbt:scalajs-fetch-urlencoded> webserver/run

Open example web at http://localhost:8080/ and click the first button, the fetch request is sent with header content-type: text/plain

while for second button, it is sent correctly with form-urlencoded

Thanks for the suggestion with js.Dictionary, it works for our case, but why it is failing with Headers type is still a mystery, I leave this to your side to investigate more, feel free to check out the above example code and test.

In addition, I'm happy to raise a PR to let BodyInit type support this URLSearchParams, will do it soon.

Thank you for setting up the example! Very helpful. Look forward to the PR :)

Glad you have a working solution for now, we'll investigate the problem with Headers.

Ah, this is quite silly actually! This code will work.

val myHeaders = new Headers()
myHeaders.set("content-type", "application/x-www-form-urlencoded")
Fetch
      .fetch(
        "/test-api",
        new RequestInit {
          method = HttpMethod.POST
          body = "key1=value1&key2=value2"
          headers = myHeaders
        }
      )

headers was cyclically referencing itself, not the variable defined above.

Oh wow, I would never have guessed! :)

BTW, I think I did a similar thing for a different trait, but one of the scalac warnings got triggered (something like "this thing is doing nothing except referencing itself", might have been scala3)

Yes, I think also enabling warnings about unused variables (which Scala 2 has) would help catch this—not the cyclic reference of course, but the unused Headers above :)

-Xlint:unused
    Enable -Wunused:imports,privates,locals,implicits.

@armanbilge wow thanks for your debugging, didn't notice that self-referencing 😂

@duchoang btw I noticed you are using http4s in your example project, you may find this project useful: https://github.com/http4s/http4s-dom