0

I'm very new to React, and to practice, I am trying to build an application that fetches information from the Yelp API, but I'm having trouble getting a response. Yelp Fusion v3 requires an 'access_token'(which I've successfully received as a response in Postman). So to make this request in my application, I am using Axios. When I am making this request inside of componentDidMount(), as a response I get

XMLHttpRequest cannot load https://api.yelp.com/v3/businesses/search?term=sushi&location=Boston. 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 500.

Though it may seem that I am incorrectly specifying the access_token and parameters, when running the same code in a separate file(not part of the application), I get the JSON response that I am looking for in my app.

Here is my componentDidMount(): 

componentDidMount: function () {
    axios.get('https://api.yelp.com/v3/businesses/search?term=Sushi&location=Boston',{
        headers: {
            Authorization: `Bearer ${token}`
        }
    })
    .then(function(res){
        console.log(res)
    })
    .catch(function(err){
        console.log(err)
    })
},

I've tried the Yelp node module as well, but I am having no luck. Please help!

Serey
  • 10,173
  • 2
  • 17
  • 22

1 Answers1

1

This error is a Cross-Origin error.

Web browsers have a catch with AJAX requests: They need to be addressed to the same origin or be authorized by the third-party itself, otherwise they are blocked. Since you have no control over Yelp, I suggest you take a workaround.

Available workarounds

  • You use something like jsonp. This method basically consists in making the request in a <script> tag. The server will wrap the response inside a Javascript script and it will be loaded unto the page. (https://en.wikipedia.org/wiki/JSONP). The server MUST offer this format for that workaround to work.
  • You use a reverse proxy. You can set NodeJS to act as one. In this setup, you will make your yelp request to your origin who will redirect it to the yelp server. This works because your Node proxy does not have the same limitations as your browser. (ex: https://github.com/nodejitsu/node-http-proxy)

There may be other ways to get around this, but those are popular methods.

Hope this helps.

gretro
  • 1,934
  • 15
  • 25
  • This makes a lot of sense, I was getting a lot of 'CORS' error and didn't really understand what it was. Do you think that setting up an API using Express would be the best way to go(making the request in the app.get() and returning the JSON)? – Serey Mar 10 '17 at 02:17
  • You can do that, this way you protect your yelp API key. Never store any sensitive information in a Javascript code. You can create a back-end that will have the secret keys to the yelp API and will serve your application the data it requires. It seems like a sensitive plan. ^^ – gretro Mar 10 '17 at 02:21