Firefox: reading body from POST returns "Object { body: "[object ReadableStream]" }" instead of actual body data
Here's a minimal example (tested on @sinclair/smoke@0.8.5, as per `npm list`)
```js
import { Network } from '@sinclair/smoke'
import { RemoteNetworkHub } from './hub.mjs'
const server = new Network({ hub: new RemoteNetworkHub('ws://localhost:5001/hub') })
const client = new Network({ hub: new RemoteNetworkHub('ws://localhost:5001/hub') })
server.Http.listen({ port: 5000 }, async request => {
if (request.method === 'POST') {
const body = await request.text()
console.log({ body })
}
return new Response('Test successful')
})
const remoteAddr = await server.Hub.address()
const text = await client.Http.fetch(`http://${remoteAddr}:5000`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ hello: "world" }),
}).then(r => r.text())
console.log({ text })
```
This is a simple variation of the sample project in #21.
results:
Firefox:
```
Object { body: "[object ReadableStream]" }
Object { text: "Test successful" }
```
Chrome:
```
{body: '{"hello":"world"}'}
{text: 'Test successful'}
```
This isn't just a formatting thing and actually shows up in errors (eg. 'unexpected value "[o"' )
I also tested the server and client on Chrome and Firefox separately, and found that the issue is on the server side of Firefox. Using chrome as the server and Firefox as the client returns `{body: '{"hello":"world"}'}`. I tested this behavior on separate browsers using two separate files like so:
a.mts:
```js
import { Network } from '@sinclair/smoke'
import { RemoteNetworkHub } from './hub.mjs'
const client = new Network({ hub: new RemoteNetworkHub('ws://localhost:5001/hub') })
//paste this value into the b.html's textbox
console.log( await client.Hub.address())
client.Http.listen({ port: 5000 }, async request => {
if (request.method === 'POST') {
const body = await request.text()
console.log({ body })
}
return new Response('Test successful')
})
```
a.html:
```html
<!DOCTYPE html>
<html>
<head>
<script type="module" src="a.js"></script>
</head>
<body>View console logs for output</body>
</html>
```
b.mts:
```js
import { Network } from '@sinclair/smoke'
import { RemoteNetworkHub } from './hub.mjs'
const client = new Network({ hub: new RemoteNetworkHub('ws://localhost:5001/hub') })
const btn = document.getElementById('btn')
const input = document.getElementById('input')
if (!btn) throw new Error('Button not found')
btn.addEventListener('click', async () => {
const remoteAddr = (input as HTMLInputElement)?.value
console.log({ remoteAddr })
const text = await client.Http.fetch(`http://${remoteAddr}:5000`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ hello: "world" }),
}).then(r => r.text())
console.log({ text })
})
```
b.html:
```html
<!DOCTYPE html>
<html>
<head>
<script type="module" src="b.js"></script>
</head>
<input type="text" id="input" />
<button id="btn">Click me</button>
<body>View console logs for output</body>
</html>
```
I'm going to look into the cause of this issue, but I thought I'd report it now and respond to this post when I find the cause.
(Not sure if I should keep all Firefox issues in #24, but I didn't want to clutter it with random bugs. Let me know what is better.)
关闭于 2024-08-12 9 条评论