最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

python - Flask SSE: EventSource's response has a MIME type ("texthtml") that is not "texteven

programmeradmin3浏览0评论

I am developing a Flask backend running in Google Colab, which serves an Angular frontend for uploading .wav files and receiving a stream of generated words via Server-Sent Events (SSE).

Problem: When the frontend tries to connect to the SSE endpoint, I get the following error in the browser console:

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

This is Frontend code

<input type="file" id="fileInput" accept=".wav">
<button onclick="uploadFile()">Upload</button>
<div id="status"></div>
<div id="output"></div>

<script>
    async function uploadFile() {
        const fileInput = document.getElementById('fileInput');
        const statusDiv = document.getElementById('status');
        const outputDiv = document.getElementById('output');
        
        if (!fileInput.files.length) {
            statusDiv.textContent = "Please select a file";
            return;
        }

        const file = fileInput.files[0];
        const formData = new FormData();
        formData.append("file", file);

        try {
            statusDiv.textContent = "Uploading...";

            const response = await fetch("https://<ngrok-url>/upload", {
                method: "POST",
                body: formData
            });

            const result = await response.json();
            if (response.ok) {
                statusDiv.textContent = "Upload successful! Receiving text...";
                
                const sessionId = result.session_id;
                const eventSource = new EventSource(`https://<ngrok-url>/stream/${sessionId}`);

                eventSource.onmessage = (e) => {
                    outputDiv.innerHTML += `<div>${e.data}</div>`;
                };

                eventSource.onerror = (e) => {
                    console.error("SSE error", e);
                    eventSource.close();
                };
            } else {
                statusDiv.textContent = result.error;
            }
        } catch (error) {
            statusDiv.textContent = "Upload failed: " + error.message;
        }
    }
</script>

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论