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

Posted 2023-02-27

【中文标题】Yelp Api - Axios/ReactJs - 如何编写代码

【英文标题】：Yelp Api - Axios/ReactJs - how to write code

【发布时间】：2018-10-16 16:19:31

【问题描述】：

想知道你是否可以帮助我。我是 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 证书的网站。所以我必须改变这个......

谢谢！

【问题讨论】：

***.com/questions/27365303/…

github.com/Yelp/yelp-fusion/issues/64

【参考方案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），则它仅适用于此选项集。

【讨论】：

嗨，利亚姆！非常感谢您的解释！这真的很有帮助，我不知道 URL/api 的存在！真的很有帮助的解释，真的很感激。我确实阅读了有关 chrome 扩展程序的信息，但我假设任何其他想要使用我的应用程序的人也需要安装它？我试过你的代码 - 谢谢你写这个！！！但是，我在控制台中得到了以下内容......

app.js:9097 Refused to set unsafe header "Origin" hub:1 Failed to load cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/…: response to preflight request does not pass access控制检查：当请求的凭据模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头的值不能是通配符“*”。因此，Origin 'localhost:8000' 不允许访问。 XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。

嗯，这是安全的一部分，不过你需要避免使用withCredential。