CODEWITHSUNDEEP
javaangularspring-kafkaserver-sent-eventsspring-reactive
raikumardipak
raikumardipak

Reputation: 1595

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

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. Chrome DEv Tools Response Network Tab

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!

Upvotes: 4

Views: 6342

Answers (2)

kodi
kodi

Reputation: 51

I had the same problem, somewhere in your eventSource.onmessage, the code change MIME type value to {'content-type': 'application/json'}, you have to keep it with the value of {'content-type':'text/event-stream'}

Upvotes: 0

jojo599k
jojo599k

Reputation: 31

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!

Upvotes: 2

Related Questions