Inconsistent Content-Type Response with Axios and EventSource

Question

Issue Description:

I'm encountering an unusual behavior when using the EventSource API in conjunction with Axios. The issue is related to the Content-Type header of the response received from the server when making an SSE (Server-Sent Events) request.

Background:

I'm using EventSource to make a GET request to an endpoint that should return Server-Sent Events (SSE).

The Problem:

When I use Axios to make the request, the response's Content-Type header is being correctly set to text/event-stream. This aligns with the expected behavior for SSE.

However:

When I use the native EventSource API directly in the browser to make the same request, I'm encountering a discrepancy in the response Content-Type header. It is being set to application/json instead of the expected text/event-stream. And I am getting error in the network tab Error getting when using eventSource

What could be the possible reasons for this inconsistent behavior in the response Content-Type header?
Are there any known browser-specific behaviors or peculiarities that could contribute to this issue?
How do I solve this issue?

Here is the reference code:

const eventSource = new EventSource(`${url}`, {
   withCredentials: true,
});

eventSource.onopen = () => {
   console.log('Connection opened.');
};

eventSource.onerror = (error) => {
   console.error('Error:', error);
};

eventSource.onmessage = (event) => {
   const eventData = JSON.parse(event.data);
   console.log('Received event:', eventData);
};

I would greatly appreciate any insights, suggestions, or potential solutions to help resolve this matter. Thank you for your assistance in advance!

Based on my understanding of Server-Sent Events, I expected the server's response Content-Type header to be set to text/event-stream, as SSE involves a continuous stream of data.
I expected the EventSource API to interpret and handle the SSE stream correctly, enabling me to capture and process the streamed events.

I'm seeking insights into what might be causing this inconsistency and how I can ensure that both Axios and the EventSource API interpret the response Content-Type header correctly as text/event-stream.

score 0 · Answer 1 · answered Aug 24 '23 at 16:09

This is just a set of questions and troubleshooting ideas:

First, the most useful troubleshooting advice is to run it from curl, and use curl -v to see the headers being sent and received. Compare them to what you see in the browser window.

Do you control the server? If so, can you log there what headers are being received. And are they different between using EventSource and axios?

new EventSource(`${url}`, {...})

is the same as writing:

new EventSource(url, {...})

Was there a reason you did it the first way? Are you sure you are calling exactly the same URL when calling it from axios?

I also wondered why you are calling it from axios when you have EventSource? :-) Is it being used in a script? Is the script running on the same machine as the browser? If not, and especially if a different network, could there be an intermediate firewall or something modifying requests?

Inconsistent Content-Type Response with Axios and EventSource

1 Answers1