0

I'm trying to render some data from the Yelp API in one of my components and I'm getting the following error:

Fetch API cannot load https://api.yelp.com/v3/businesses/search?location=New%20York. Response for preflight has invalid HTTP status code 500

I had a CORS error before that but I just installed a plugin for Chrome (temporary solution?).

This is the function for to render data

const yelp = require('yelp-fusion');

const clientId = "MY ID";
const clientSecret = "MY KEY";

const token = "MY TOKEN";

const client = yelp.client(token);


let businessSearch = (inputLocation) => {
  client.search({
    location: inputLocation
  }).then(response => {
    console.log(response.jsonBody.businesses[0]);
  }).catch(e => {
    console.log(e);
  });
}


module.exports = {
  businessSearch,
};

I have a vague idea of what's going on, the problem lies in trying to fetch data in my internal server but i'm not sure how to fix it. Any ideas?

  • Have you tried searching up HTTP status code 500? – Andrew Li Jul 31 '17 at 19:49
  • Still seems like a CORS error to me. Your preflight, ie OPTIONS request is failing. Can you try to do a cURL request for the same? – gargsms Jul 31 '17 at 19:54
  • https://www.getpostman.com/ is a good tool to test API calls if you arent a cURL fan – canaan seaton Jul 31 '17 at 19:57
  • Yeah, it seems to be. When I run the api file with `console.log(businessSearch("New York"));` I can actually fetch the data. Never worked with API's in React so i'm confused as to why the token isn't being passed into my component. –  Jul 31 '17 at 19:58
  • Should've mentioned i'm using the Yelp-Fusion module that does all the requests. Seems like it's not supporting CORS: https://github.com/Yelp/yelp-fusion/issues/221 –  Jul 31 '17 at 20:10
  • 1
    You'll need an intermediary API to handle requests from your application, then that application can make the requests to yelp. Typically a small express server is enough for this. – Ohgodwhy Jul 31 '17 at 20:18
  • Possible duplicate of [React Isomorphic Fetch No 'Access-Control-Allow-Origin' Header with Yelp Fusion API](https://stackoverflow.com/questions/44444777/react-isomorphic-fetch-no-access-control-allow-origin-header-with-yelp-fusion) – Cody Reichert Aug 01 '17 at 00:11

0 Answers0