Yelp Api - Axios/ReactJs - 如何编写代码

Question

想知道你是否可以帮助我。我是 reactjs 新手，不完全确定如何发出 api 请求？

基本上，我正在构建一个应用程序，它使用 Google apis 地理定位来获取当前用户的纬度/经度。

一旦我有了这个 lat 和 lng，我想将它附加到我的 Yelp api 调用中。因此，根据用户的位置，应用程序将从 API 中提取与位置相关的内容/数据。 EG - 如果我在伦敦，我的伦敦 lat/lng 将附加到 api 调用。

我已经完成了整个位置部分的工作。我的应用程序正在存储我的 lat 和 lng。但我不确定如何在 reactjs 中设置 Yelp api 请求。我正在做这个客户端。这是我目前拥有的代码：

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 在我的应用程序上运行，因为它会惩罚任何拥有 symantecs SSL 证书的网站。所以我必须改变这个......

谢谢！

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 代理是为需要绕过的开发者提供的免费服务 与执行标准 AJAX 请求相关的同源策略 3rd 派对服务。

在您的代码中应用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，它使您的浏览器在您的 XHR 请求中包含 cookie 和身份验证标头。如果您的服务依赖于任何 cookie（包括会话 cookie），则它仅适用于此选项集。