SSE subscribing w/ EventSource, CORS policy

[krixen1]

I’ve been going through various old posts but i can’t seem to get SSE to work on my javascript app using the spark api. Here is code I have:

        var url = "https://api.spark.io/v1/devices/*********/events/?access_token=************"
        const eventSource = new EventSource(url, { withCredentials: true, rejectUnauthorized: false });
        eventSource.addEventListener('event', (event) => {
            console.log(event)
        });

but I am constantly getting CORS errors: “preflight request doesn’t pass access control check. Redirect is not allowed for a preflight request.”

Is there something I am missing?

[bko]

The latest API is here: Cloud API reference | Reference Documentation | Particle

You don’t have an event prefix in your URL, but you do have a ‘/’ before the access token. You should remove the slash for all your events, or add an event prefix name after the slash and before the access_token part to get just a prefix named set of events.

I not sure that would be a CORS problem. If that doesn’t help, you might tell us where you are running this code, in a browser? In a framework? Are you sure the CORS error is coming from this URL?

[rickkas7]

I think the problem is that you need to use api.particle.io. I suspect there’s a redirect, and the redirect won’t be followed because of CORS. But the problem is not really CORS, it’s that the URL is wrong. The same sort of thing happens when you use an invalid endpoint.

[krixen1]

  useEffect(() => {
    const eventSource = new EventSource('https://api.particle.io/v1/devices/events?access_token=********');
    eventSource.addEventListener('Temperature', (event) => {
      const newData = JSON.parse(event.data);
      setTableData((prevData) => [...prevData, newData]);
    });
  }, []);

this is the current code i was using and still getting the CORS issue. I am fairly certain now that the issue is actually with the React framework + eventsource im using. I need to add a proxy to event source, but what happens is, the proxy gets added like:

http://localhost:4000http://api.particle.........

instead of having a / after the 4000. So the particle api cannot parse the URL I dont know any way around it. i just might not be able to use SSE with react the way I want to.

[bko]

Hi @krixen1

I don’t know anything about React, but this page says that you should set the URL to be the part after host, i.e. “/v1/devices/events…” since the proxy becomes the default host.

Your localhost port would then forward to https://api.particle.io for every URL, which might not work in other ways depending on your app.

[krixen1]

Thanks for helping, even though this is a little out of scope. I think the error is in the event source library itself. Here is how I can add a proxy to the event source:

url = "http://api.particle.io/v1/devices/events?access_token=***"
const eventSource = new EventSource(url, { withCredentials: true, proxy: "http://localhost:4000"});

the error I get back from particle api is:

message: Failed to execute 'fetch' on 'Window': Failed to parse URL from http://localhost:4000http://api.particle.io./v1/devices/events?access_token=***

Im not entirely sure, but I think its missing a / right after the 4000, and I have no way to append that afaik