Please help me with CORS and Meetup API

1

I agreed to help update a website for a meetup I attend called SLC Devs. I’m updating the site so it will show the upcoming meetups. I need help hitting the Meetup API and beating CORS. I’ve always used JSONP to and jQuery to get past CORS but on this project, I’m trying to use Fetch to make the GET request. here’s my code:

  var myHeaders = new Headers();
  myHeaders.append('Access-Control-Allow-Origin', 'https://api.meetup.com/*')
  var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

  fetch('https://api.meetup.com/slcdevs/events?&sign=true&photo-host=public&page=20', myInit)
    .then(function (res) {
      return res.json()
    })
    .then(function (myJson) {
      console.log(JSON.stringify(myJson));
    })

Heres where I was testing the api: https://secure.meetup.com/meetup_api/console/?path=/:urlname/events#
if I add slcdevs to the :urlname field it shows the data I want. When I run my code, it throws this error in the console

image
image956×275 15.6 KB

I keep reading CORS articles but they don’t seem to make sense. I would really appreciate the help

2

The easiest solution is to have backend people fix CORS issue so that others can simply consume that api without any cross origin issues. If that’s not valid, try using https://cors-anywhere.herokuapp.com/

This is my favorite solution. All you need to do is prepend this string before the actual api call. For ex.

https://cors-anywhere.herokuapp.com/https://api.meetup.com/slcdevs/events?&sign=true&photo-host=public&page=20

Use JSONP as only last resort.

** I’ve been to few angular js meetups in Lehi before!

1 Like
3

That’s the easiest solution I have ever seen. Thanks so much. Lehi is nice. Thanks for the help