CORS issue Fetch API cannot load https://api.yelp.com

[connor11528]

I feel like this the most common AJAX issue in the world but I am running in to a cross origin request issue. I am using chrome browser. Do i need to set a request header or pass parameters?

What can I do in my javascript code to enable the request to the yelp API?

Thank you!

Code setup:

import Yelp from 'yelp'

const yelp = new Yelp({
  consumer_key: 'EYQr......vwA',
  consumer_secret: 'CrWS.......Smw0',
  token: '5knCxp........2M7cA9H',
  token_secret: 'sxpxA5........OKHYA',
});

yelp.search({ 
  term: 'food', 
  location: 'Montreal'
})
.then(function (data) {
  console.log(data);
})
.catch(function (err) {
  console.error(err);
});

Error text:

OPTIONS https://api.yelp.com/v2/search?term=food&location=Montreal 404 ()

localhost/:1 Fetch API cannot load https://api.yelp.com/v2/search?term=food&location=Montreal. 
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:8080' is therefore not allowed access. 
The response had HTTP status code 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Error image:

[connor11528]

I am using vue.js and vue-resource so tried setting headers using that library to no avail

Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'
Vue.http.headers.common['Access-Control-Allow-Headers'] = 'Content-Type,Authorization'
Vue.http.headers.common['Access-Control-Allow-Methods'] = 'GET'

It looks like we're using node-oauth to make the request. Not sure if we can set custom headers or what the deal is! https://github.com/ciaranj/node-oauth/issues/243

[connor11528]

Okay I think it is because this code is running on the client side and in order for this package to work it must only be on server side

https://github.com/Yelp/yelp-api/issues/51