3

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!

Toerktumlare
  • 12,548
  • 3
  • 35
  • 54
raikumardipak
  • 1,461
  • 2
  • 29
  • 49
  • Your produces tag should be doing the right thing. Try using produces = MediaType.TEXT_EVENT_STREAM instead, like in the example here: https://www.baeldung.com/spring-server-sent-events ? – MyStackRunnethOver May 02 '20 at 14:56
  • @MyStackRunnethOver Hi, I already did that. But the problem persists. If you see the image I attached in the Question I get two Content-Type values . Not sure why? When I check the end point in browser http://localhost:8181/events I get the output successfully as in the updated image I have attached just now. The problem lies in calling the REST Url over angular client. Not sure though where excactly. – raikumardipak May 02 '20 at 15:12
  • That's odd. What happens if you remove `;charset=UTF-8`? – MyStackRunnethOver May 03 '20 at 21:31
  • Yeah. onmessage gives this issue. If I remove the charset I guess I'll still get the same problem. I'll check that though. – raikumardipak May 04 '20 at 00:49
  • have you tried returning a `ServerSentEvent` instead of `ConsumerEvent` a SSE needs to have a specific format. Try `ServerSentEvent.builder().data(new ConsumerEvent(record.topic(),record.value())).build()` – Toerktumlare May 13 '20 at 19:41
  • did you find any solution for the same @raikumardipak ? I have similar issue. – Parvindra Singh Aug 23 '20 at 09:27
  • @ParvindraSingh i did not again get time to work upon it to my regret – raikumardipak Aug 24 '20 at 04:48

2 Answers2

2

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!

Saeed Zhiany
  • 2,051
  • 9
  • 30
  • 41
jojo599k
  • 21
  • 4
0

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'}

Procrastinator
  • 2,526
  • 30
  • 27
  • 36
kodi
  • 51
  • 9