Bug: URLSearchParams as a Fetch API body uses the wrong Content-Type

[Bug]

What

The Fetch API determines the wrong Content-Type header when its body is set to a polyfilled URLSearchParams instance.

Details

This occurs when the following statements are true:

1. The URLSearchParams object has been polyfilled.
2. A POST request is made using the Fetch API.
3. The POST request’s body is set to an instance of the polyfilled URLSearchParams object.
4. The POST request’s Content-Type header has NOT been set manually.

Safari on iOS seems to use the polyfilled URLSearchParams, so that’s what I’ve used to debug the issue.

I’ve created a sample project (https://github.com/tobyaherbert/urlsearchparams-bug) and published it (https://urlsearchparams-bug.nialto.workers.dev) so you can see the problem.

Here are some screenshots of it working as expected (no bugs) in Google Chrome on macOS:

Also working in Safari on macOS:

But not working in MobileSafari on iOS:

[en30]

@romainmenke Trying to create a minimal reproducible example, I found that the fetch polyfill ignored inferred Content-Type when the headers option is given as object.

So I opened another issue there. https://github.com/github/fetch/issues/1076

[romainmenke]

I think there are 3 separate issues here :

1. default feature alias includes URL but not fetch. For this feature to work both are required. (@tobyaherbert)
2. User agent parsing for the polyfill service doesn’t seem to detect more modern Safari versions. (only iOS seems affected?)
3. Some unknown thing is breaking this feature for @en30.

1 and 2 are related, but 1 should be resolved by including fetch in the polyfill url. Even if 2 is breaking stuff in recent Safari iOS versions, older browsers will also be broken without including fetch.

---

@en30 I tried to verify if the URL or fetch polyfill break this feature if the browser has native support. For me it all seems to work.

My steps :

• run the polyfill-library test suite for fetch
• added a test endpoint that returns the Content-Type
• added a test to send a POST request with URLSearchParams to this endpoint
• modified the config for both URL and fetch so that the polyfills are served to newer Safari versions (those with native support)

(https://github.com/romainmenke/polyfill-library/pull/71/commits/4c37f51411081ee56bfe81766f595c17a15cbfee)

I tried both the polyfill bundle from the test suite and a hard coded url from the production service (https://polyfill.io/v3/polyfill.min.js?version=3.108.0&features=URL,fetch)

I was unable to to get a failure when both URL and fetch are polyfilled in Safari browsers (iOS and macOS)

Results from CI suite : https://github.com/romainmenke/polyfill-library/runs/4059057445?check_suite_focus=true (IE fails here because I was lazy and kept console.log statements)

Is it possible that you have other polyfills? For example core-js manually or via preset-env.

---

At this point only the user agent issue is actionable I think, but this should be moved to a new issue.