1

As I explained in a previous question I have a FastAPI endpoint that returns a StreamingResponse response that is then consumed by a React application using fetch().body.getReader() API.

The problem I'm facing appears when I open my React application, select the image (s) using Uppy and send it to my FastAPI endpoint, locally it works just fine and the images are returned as a stream response:

Image 1 - Local

Image 2 - Local

But when I deploy my application on Heroku or Render the rendered response is all broken:

Image 1 - Server

Image 2 - Server

Adding more context to my previous question I'm rendering the stream using an async generator:

async function* submit({data}) {
    const formData = new FormData()

    data?.current?.files?.successful.map(image =>
        formData.append('images', image.data)
    )

    formData.append('language', data.current.language.code)

    try {
        const response = await fetch(
            'endpoint',
            {
                method: 'POST',
                body: formData
            }
        )

        const reader = response.body.getReader()

        while (true) {
            const { value, done } = await reader.read()

            if (done) break

            const base64 = `data:${response.headers.get(
                'content-type'
            )};base64,${btoa(String.fromCharCode(...new Uint8Array(value)))}`

            yield base64
        }
    } catch (error) {
        // ...
    }
}

That is called when the "Gallery" component in the screenshot is rendered:

const [images, setImages] = useState([])

    useEffect(() => {
        ;(async () => {
            for await (const image of await translateSubmit({
                data
            })) {
                setImages(previous => [...previous, image])
            }
        })()

        // eslint-disable-next-line
    }, [])

I was expecting to get the same result in the server when the application is deployed, but it just doesn't work as it should and I'm not sure how to approach the problem. Any tips?

  • I have the same problem. In my case, when my frontend is connected to distant server, my request has `fetch-mode` to `cors`. And in local, in `basic`. I think I have cors problem with cross-domain (in local, front and back are in `localhost`). I this infos can help you... – Jeromearsene Jul 09 '23 at 16:48

0 Answers0