Python Flask app running on Azure App Service suspending server sent events

Question

Hey there,

I've got a Python Flask app that returns a stream of data using SSEs to an HTML/Javascript front-end. Here is the event stream code:

Server side:

@app.route('/stream', methods=['GET'])
def stream():
    headers = {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
        'X-Accel-Buffering': 'no'
    }
    return Response(generate_stream(), headers=headers, mimetype='text/event-stream')

Client-side:

then(response => {
                    console.log('Query response received');
                    document.getElementById('message-input').value = '';
                    const eventSource = new EventSource('/stream');

                    // Create a single message element for the incoming stream
                    const chatMessages = document.getElementById('chat-messages');
                    const messageElement = createMessageElement('Server');
                    chatMessages.appendChild(messageElement);
                    const textElement = messageElement.querySelector('p');
                    let codeContent = '';
                    let isCodeSnippet = false;
                    let collectedContent = '';
                    let isCollectingCode = false;

                    eventSource.onmessage = function (event) {
                        console.log('Raw event data:', event.data); // Log raw data to console
                        const data = JSON.parse(event.data);
                        console.log('Parsed event data:', data); // Log parsed data to console

                        if (data.type === 'stream_completed') {
                            eventSource.close();
                            // Check if final_response is present
                            if (data.final_response) {
                                textElement.innerHTML = data.final_response; // Use final_response as the content
                                console.log('Before rendering markdown tables:', textElement.innerHTML);

                                // Call the renderMarkdownTables function on the textElement to process its content
                                renderMarkdownTables(textElement.parentNode);

                                console.log('After rendering markdown tables:', textElement.innerHTML);
                            } 

The application works perfectly locally it's only when I deploy to Azure that I face problems. Essentially as soon as the eventsource is started, it seems that the eventsource is suspended and then returns a 504 gateway timeout once enough time has passed (see images)

I've got a CORS wildcard going, have tried to configure the ports a certain way, not sure what else to try. Open to any and all suggestions, thanks in advance for your reply:)

All the best,

Will