Getting data with Meetups API javascript

Question

I'm trying to use meetups API with an API key, but I'm being blocked by CORS.

I'm using the example meetup gives: https://api.meetup.com/2/events?key=mykey&group_urlname=ny-tech&sign=true, replacing the API key with my API key. This example comes from here.

Here's my code (I took out my key and replaced it with < key>):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button id="find">find</button>
 <script>
        $("#find").click( function(){
          $.getJSON("https://api.meetup.com/2/events?key=<key>&group_urlname=ny-tech&sign=true", function(data){
            console.log(data);
          });
        });
</script>

I'm getting these errors:

Access to XMLHttpRequest at 'https://api.meetup.com/2/events?key=aKey&group_urlname=ny-tech&sign=true' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. test.html:18

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://api.meetup.com/2/events?key=aKey&group_urlname=ny-tech&sign=true with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

I'm new to API's and I'm confused about what's going on here. I know that some API requests on meetup's API need OAuth, which I'm still trying to grasp. However, since this was the example that was used for API keys in the docs as opposed to OAuth, I expected it to work with my API key. The request works when I simply paste it in the browser but not when I use jQuery to grab it.

There are several places where the documentation talks about CORS: Here the documentation says

"you must be using OAuth to benefit from CORS."

And here

While we support key-based authentication for first-party applications, we require OAuth for third-party applications that take actions on behalf of other users.

I'm not taking action on behalf of other users. But am I a third party app? What would be a first party app? Under what circumstances would the request I'm making work?

`Access to XMLHttpRequest blocked by CORS policy` - easiest way to bypass that is by using a *back-end* to load your application. It can be simple as moving your files to an xampp folder or loading it from *NodeJS*. For your HTTP GET request part of the question, have you [read this](https://api.jquery.com/jquery.get/) ? — ZombieChowder, Jan 29 '19 at 18:09

score 2 · Accepted Answer · edited Apr 17 '19 at 09:46

Looks like Meetup only allows CORS with requests that are authenticated via OAuth – reading this issue

One way is to use jsonP. After you get your generated API signature URL you can add ?callback=? as a first parameter and it will work for you.

Here is an example below

$("#find").click(function() {
  $.getJSON("https://api.meetup.com/2/events?callback=?&offset=0&format=json&limited_events=False&group_urlname=ny-tech&page=200&fields=&order=time&desc=false&status=upcoming&sig_id=SIGID&sig=SIG", function(data) {
    console.log(data);
  }).fail(function(jqxhr, textStatus, error) {
    console.log("error", textStatus);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button id="find">find</button>

Thanks. I haven't tried this yet because there's a few things I need before I can apply get the OAuth API signature URL, but I will try it eventually. And thanks for taking the keys off my OP. I deactivated the key after you brought it to my attention. — Dashiell Rose Bark-Huss, Feb 02 '19 at 20:11

Getting data with Meetups API javascript

1 Answers1