Cannot resolve Server-Sent Events issue with basic settings

Question

I have a PHP script that queries an API somewhere. The issue is that the data does not pull through to JavaScript. I have taken labour to add the following headers right at the beginning of the servier side script:

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

On the javascript side I added the following bits and pieces of code for debugging purposes.

if (!!window.EventSource || window.EventSource !== undefined) {
  var stream = new EventSource('/path/to/event/source.php');

  console.log("Everything looks good.");
}else{
  console.log("Your browser does not support Server-sent events! Please upgrade it!");
}

And then inside the stream listener I added something along these lines:

stream.addEventListener('my_event', function(event){
  if(event.origin != 'example.com'){
     console.log('We have a CORRS problem');

     return;
   }
});

The idea of the check above was to see in the domain url that operates on our server and client sides is the same and as expected.

The last bit of debugging I added was the error listener registration on my stream to catch any errors that might be hidden behind the stream object itself.

stream.addEventListener('error', function(event){
   if(event.readyState == EventSource.CLOSED){
       console.log("Connection has an error.");
    }
}, false);

With all of this I am still getting an error on Firefox and Chrome with the text below:

The connection to example.com was interrupted while the page was loading.

And then the second one as shown below:

Firefox can’t establish a connection to the server at example.com/path/to/event/source.php

I am of the view that this issue has nothing to do with the code but everything else but I do not have tangible knowledge on this technology. Anyone with ideas on how I can tackle this issue please help.