[Fixed] [API] Unable to retrieve data - help!

bug reports
1

Hello there,

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.

Here is my code for the HTTP request:

    this.getSongExamples = function() {
        var promise =
            $http(
                {
                    method: 'GET'
                    , url: "https://api.hooktheory.com/v1/trends/nodes"
                    , headers: {
                          'accept': 'application/json'
                          , 'authorization': 'Bearer [ authentication token ]'
                          , 'content-type': 'application/json'
                      }
                }
            ).then( function( response ) {
                if ( response.status === 200 ) {
                  console.log( response );
                  return response;
                }
                console.log( 'Error: ' + response.error );
            } );

        return promise;
} )

Any ideas?

Thanks,
Andrew

2

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.

3

Hi @aplan, give it a try now.

4

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.

It seems like the ‘Access-Control-Allow-Origin’ header is still not being returned with the response. Maybe you have to enable it on the server? This Stack Overflow thread talks about it more: javascript - How does the 'Access-Control-Allow-Origin' header work? - Stack Overflow.

Let me know what you think. Thanks again!

Best,
Andrew

5

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.

6

Also, would love to see what you are building! Please post a link when it is up.

7

That did the trick Chris, I’m getting data now! Wow this is exciting. I will definitely post the link when it’s up. Thank you so much for your help!

8

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?

9

Are you getting a CORS error?

10

Yes, the exact same thing.

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.

11

@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!

12

I just re-enabled CORS so you’ll have access.

13

@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?

14

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.