I’m working on an AngularJS web app that utilizes the Hooktheory API. I’ve been able to obtain an authentication token, and am able to make successful GET requests via the Postman app, but when I run my web app on live-server through Chrome, my HTTP requests for the chord probability data keep returning the following error:
XMLHttpRequest cannot load https://api.hooktheory.com/v1/trends/nodes. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8000’ is therefore not allowed access. The response had HTTP status code 404.
Hi @aplan, let me look into it. I ran into a similar issue when we were dogfooding the API for our education products and I remember specifically having to allow CORS on the API endpoint I was using. I must not have set it up for everything. I will take a look.
Hey Chris, thanks for the speedy reply! I tried requesting from the API and unfortunately I get the same response:
XMLHttpRequest cannot load https://api.hooktheory.com/v1/trends/nodes. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8000’ is therefore not allowed access. The response had HTTP status code 404.
Hi Andrew, this problem has been fixed. There were a few things that needed doing. It turns out that for this specific endpoint I hadn’t created a URL rule for the OPTIONS verb which Angular sends as a “pre-flight” request for all of its actual requests. I had to allow the OPTIONS verb on the two endpoints and also set CORS origin to * which solved it. Thank you for your patience.
Sorry for necrobumping old topic, but unfortunately the issue persists. I’m currently building an app in Vue and get the same error. Also, requests made in Node work fine. @chris The issue doesn’t seem to be framework-specific (the preflight reuest is actually made by the browser), so is there anything else that you could have potentially missed?
Access to XMLHttpRequest at ‘https://api.hooktheory.com/v1/trends/nodes?cp=1’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
@chris I’m sorry for bothering you again, but I’d just like to know if there’s a chance of fixing this in a near future. I need to know if It’ll be possible to make those requests from the browser or will I have to setup some server/cloud function for it. Thank you!
@chris That’s awesome! Thank you very much. Also, if you don’t mind me asking, why did this issue appear again? Is it possible that the API may break in the future for the same reason?
It broke because I was updating the CORS code the other day and forgot to add back the wildcard. Yes it is possible it will break in the future. We don’t consider the trends endpoint of the API something that anyone should consider production worthy. We threw it together over a weekend and it is a lot of legacy messy code. If you are building an app that needs it you should reach out at support@hooktheory.com and we can discuss further.