Yelp Api - Axios / ReactJs - как написать код

Question

Интересно, если бы вы могли мне помочь. Я новичок в responsejs и не совсем уверен, как делать запросы API?

По сути, я создаю приложение, которое использует геолокацию apis Google, чтобы получить текущие пользовательские широты и долготы.

Как только я получу этот лат и lng, я хочу добавить это к моему вызову API Yelp. Таким образом, в зависимости от того, где находится пользователь, приложение затем извлекает соответствующий контент / данные, связанные с местоположением, из API. Например, если я нахожусь в Лондоне, мой лондонский лат / лнг добавит вызов API.

У меня вся часть локации работает. Мое приложение хранит мой лат и lng. Но я не уверен, как настроить запрос Yelp API в Reactjs. Я делаю это на стороне клиента. Вот код, который у меня есть на данный момент:

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
    });
  });
 }

Но я получаю следующую ошибку:

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.

Любая помощь будет отличной! Google запретил zomato api работать с моим приложением из-за того, что он наказывает любые сайты, имеющие SSL-сертификаты Symantecs. Поэтому я должен изменить это ....

Спасибо!

Answer 1

Эта проблема связана с внутренним сервером, когда Axios отправляя предполетный запрос, сервер должен разрешить запрос и ответ с заголовками.

Что вы можете сделать в этом случае?

Поскольку у вас нет доступа к серверу, вам необходимо использовать это расширение Chrome: Allow-Control-Allow-Origin или вы можете использовать онлайн CORS прокси, например:

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

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

CORS proxy - бесплатный сервис для разработчиков, которым необходимо обойти политика того же происхождения, связанная с выполнением стандартных запросов AJAX для 3-го праздничные услуги.

Применить herokuapp в вашем коде:

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
    });
  });
 }

Я добавил withCredentials, это заставляет ваш браузер включать файлы cookie и заголовки аутентификации в ваш запрос XHR. Если ваша служба зависит от какого-либо файла cookie (включая сеансовые файлы cookie), он будет работать только с этим параметром.