SSE `this.eventSource.onmessage` call fails. Error `"EventSource's response has a MIME type ("application/json") that is not "text/event-stream"

Question

The Angular Server Sent Event this.eventSource.onmessage call fails with an error "EventSource's response has a MIME type ("application/json") that is not "text/event-stream". Aborting the connection." I see in the Chrome Dev Tools (image attached) that there are two Content-Type being returned.

Backend Code:Spring Reactor/REST

    @GetMapping(value="/events",produces = "text/event-stream;charset=UTF-8")
    public Flux<ConsumerEvent> getProductEvents(){
        return kafkaService.getReceiverRecordAllFlux()
                .map(record->
                    new ConsumerEvent(record.topic(),record.value())
                );
        }
}

Front end:Angular

public startKafkaTopicInfoEventSource(): void {
    let url = BASE_URL;
    this.eventSource = new EventSource(url); 
    this.eventSource.onmessage = (event) => {//Error: EventSource's response has a MIME type ("application/json") that is not "text/event-stream". Aborting the connection
        this.zone.run(() => {
        // some code here
      })

    }
// other code here
}

The method this.eventSource.onmessage gives an error EventSource's response has a MIME type ("application/json") that is not "text/event-stream". Aborting the connection.

Any help would be great!

Answer 1

I had the same problem using ASP.NET (and nodeJS).

I don't know if this helps but I experienced that, if you use Moesif Origin & CORS Changer (in the standard configuration, I didn't test custom one) some Headers get added or overwritten (the "new" one is chosen) by the plugin (at least Content-Type and X-Content-Type-Options) as we see in your Dev Tool Screenshot.

So Maybe some plugin you installed in Chrome causes this. Try running in a different Browser or without Plugins.

Hope I can help somebody and have a nice day!