Wrong content-type header sent with requests

[tremby]

🐛 Bug description

Requests are sent in JSON format, but with the header content-type: application/x-www-form-urlencoded.

The Algolia server doesn't seem to mind; nothing is broken except the dev tools' view of the request.

🔍 Bug reproduction

Steps to reproduce the behavior:

1. Set up react-instantsearch-hooks-web, add a SearchBox.
2. Type something in the box to cause a request
3. See the network tab in dev tools, inspect the request
4. See the outgoing headers and data

💭 Expected behavior

Correct header is sent (content-type: application/json)

🖥 Screenshots

Here you see the request header has the wrong content type.

This is what Firefox renders in the request tab -- it's declared as URLencoded form data so it's been split at & symbols and key-value pairs split at = symbols.

If you flip to "raw" view you can see it's really JSON data.

Environment

• OS: n/a
• Browser: n/a (screenshots are firefox)
• Version: algoliasearch 4.13.1, react-instantsearch-hooks-web 6.26.0

[Haroenv]

This is actually on purpose to make sure we use something called a Simple Request to avoid a network request for the CORS OPTIONS.

The payload is indeed not easy to read sometimes, but I've (personally) made a tool to easily read the parameters as an object again: https://haroen.me/algolia-tools/#request-explorer

[tremby]

Maybe text/plain would be better, then? It'd at least be readable without special addons.

[Haroenv]

I didn't know the engine changed to support text/plain as well, and that would be a better choice indeed. For now I'm not sure if eg. a special backend passed with "hosts" deals with that correctly, so changing it would be too risky to do in a non-major version.

In a next major version we're planning we are already changing the request to not use params anymore, but pass all values directly in the body which is much more readable already, even with the wrong content-type. I'll bring this topic up and see if it makes sense to change it in that major version to text/plain as well.

For the time being if you want to pass the content type yourself, you can do that:

algoliasearch('', '', { headers: { 'content-type': 'text/plain' }});

(in a sandbox: https://codesandbox.io/s/kind-goldwasser-z4335j?file=/src/App.tsx:308-463)