Yelp Api - Axios/ReactJs - how to write code

Question

Wondering if you could help me. I'm new to reactjs and not entirely sure how to make api requests ?

Basically, I'm building an app, which uses Google apis geolocation to get the current users lat/lng.

Once I've got this lat and lng, I want to append this to my Yelp api call. So depending on where the user is, the app will then pull through relevant location related content/data from the API. EG - if I'm in London, my London lat/lng, will append to the api call.

I've got the whole location part working. My app is storing my lat and lng. But I'm not sure how to setup the Yelp api request in reactjs. I'm doing this client side. Here's the code I have at the moment:

getYelp = () => {
const params = {lat: this.state.lat, lng: this.state.lng};

Promise.props({
  local: axios({
    url: 'https://api.yelp.com/v3/businesses/search',
    params: params,
    json: true,
    method: 'GET',
    headers: {'user-key': 'MY-API-KEY'}
  }).then(res => console.log(res.data))
    .catch(err => console.log(err))
 })
  .then(data => {
    this.setState({
      yelpData: data
    });
  });
 }

But I get the following error:

Failed to load https://api.yelp.com/v3/businesses/search: 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:8000' is therefore not allowed access. The response had HTTP status code 403.

Any help would be great! Google has prevented zomato api from working on my app, due to it penalizing any sites that have symantecs SSL certificates. So I have to change this....

Thank you!

https://stackoverflow.com/questions/27365303/what-is-the-issue-cors-is-coming-to-solve — Muhammad Usman, May 06 '18 at 20:50

score 0 · Accepted Answer · answered May 06 '18 at 21:12

This problem related to the backend server when Axios sending a pre-flight request the server should allow the request and response with headers.

What can you do in this case?

As you don't have any access to the server so you need to use this chrome extension: Allow-Control-Allow-Origin or you can use online CORS proxy like:

https://cors-anywhere.herokuapp.com/http://example.com

http://cors-proxy.htmldriven.com/?url=http://www.htmldriven.com/sample.json

CORS proxy is a free service for developers who need to bypass same-origin policy related to performing standard AJAX requests to 3rd party services.

Apply herokuapp in your code:

getYelp = () => {
const params = {lat: this.state.lat, lng: this.state.lng};
const urlProxy = 'https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search';
Promise.props({
  local: axios({
    url: urlProxy,
    params: params,
    json: true,
    method: 'GET',
    withCredentials: true,
    headers: {
                'user-key': 'MY-API-KEY'
                'Accept': 'application/json',
                'Content-Type': 'application/json'
                'Origin': 'http://localhost:8000',
                'Access-Control-Allow-Headers': '*',
                'Access-Control-Allow-Origin': 'http://localhost:8000',
            },
  }).then(res => console.log(res.data))
    .catch(err => console.log(err))
 })
  .then(data => {
    this.setState({
      yelpData: data
    });
  });
 }

I added withCredentials it makes your browser include cookies and authentication headers in your XHR request. If your service depends on any cookie (including session cookies), it will only work with this option set.

Hi Liam! Thank you so much for your explanation! That was really helpful and I had no idea the URL/api existed! Really helpful explanation and really appreciate at it. I did read about the chrome extension, but I'm assuming any body else who wants to use my app, would need to install that too? I tried your code - thank you for writing this!!! However, I got the following back in console.... — Reena Verma, May 06 '18 at 21:32
**app.js:9097 Refused to set unsafe header "Origin"** **hub:1 Failed to load https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.** — Reena Verma, May 06 '18 at 21:32
Well, this is a part of security, you need to avoid using `withCredential` though. — Shrroy, May 06 '18 at 21:41

Yelp Api - Axios/ReactJs - how to write code

1 Answers1