CORS Policy Error
stjohnjohnson opened this issue · 12 comments
Hey folks, I haven't used the API since last November. But I was just updating my site with the new Extra-Life donor IDs and I noticed my calls are failing with:
Access to XMLHttpRequest at 'https://www.extra-life.org/api/participants/480323?_=1655251911412' from origin 'https://stj.watch' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Is this expected? Is there something I need to change to get CORS to work?
hi @stjohnjohnson , welcome back!
the access-control-allow-origin response header is provided in response to an origin header being furnished in the original request. you can read more about it here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
here's the cURL for your request:
curl --location --request GET 'https://www.extra-life.org/api/participants/480323' \
--header 'origin: https://stj.watch'
hope this helps!
Thanks @timmixell. This is specifically in use on a website. Here's the JQuery AJAX call: https://github.com/stjohnjohnson/stj.watch/blob/5b51d3d7f302efcd6035285583d9393ed346ba6b/js/extralife.js#L23-L42
Is there a better way to do this now?
Also, the access-control-allow-origin is being returned from extra-life.org, previously it was either not set or *.
hey @stjohnjohnson : i see the problem on our end. i'll get a ticket going internally, and follow up with you once we've got it squared away. thanks, and my apologies for the inconvenience!
@stjohnjohnson I apologize for not following up sooner: this should be resolved now. thanks!
I've been hitting the same error for a few days now and I'm not sure what's up. Any of the tools I've used in the past aren't working. Breadweb's Extra Life Helper; Bozarths Extra Life Tracker; even the Donordrive stream kit. All of them have started returning that same CORS error. I historically have run them locally as a browser source in OBS no problem.
I also tried using the http://breadweb.net/extralife-helper/ and I get the same error. I did try it on my phone on wifi, same error. Turning wifi off and using cell data the site works just fine and pulls back my info.
Is it possible that something is wrong with my network or router?
@nlmenghini - assuming you're using an HTML/Javascript solution, can you include a snippet of the markup that includes the script locations and contents? thanks!
Hey @timmixell, a team member of mine pointed out that it could be the API URL I was using: "https://www.extra-life.org/api"
He suggested I change it to "https://extralife.donordrive.com/api/" and now everything works just fine. Another team member said he was still using the old URL and his worked fine. I'm happy it's working now but it leaves me with little confidence that it's the right solution.
I am using the https://github.com/DonorDrive/StreamKit stuff and I haven't modified the files at all. Specifically the donation-ticker.html and the streaming-thermometer.html.
You'll have to forgive me I'm a bit of a technical neophyte; I'm not entirely sure what you mean by the script locations and contents. Do you mean the stuff that is in the 'head' section of the 'html' file?
@nlmenghini I am so sorry for dropping the ball on this. While extralife.donordrive.com works, we still need to pin down what you're encountering with those CORS headers making requests to www.extra-life.org.
Otherwise, were you able to get things figured out?
@timmixell I was able to figure it out on my end. I think I found my problem though and like everything else with code it's always self inflicted. It was the count down timer. I had the refresh set to 100 MS instead of 1000 MS. Which was apparently causing all the problems. I just never suspected it since I didn't think that it was making an API call. I still don't know why it's triggering an API call. You put in in the start and end times yourself.
I think all the new stuff "didn't work" because I would see that it was working and then open the older, apparently problem file which was causing me to get rate limited for a still unknown amount of time. Then a poor understanding of the errors in the console lead me to believe I was still getting CORS errors when it in fact it was just too many requests to the API.
TLDR; I'm dumb, but a little less dumb now. Things work fine.
Well that's good to hear. Please don't hesitate to raise an issue if you run into anything else. Many thanks!