Question

想知道你是否可以帮助我。我是不知道如何做出反应并不完全确定如何提出api请求？

基本上，我正在构建一个应用程序，该应用程序使用Google apis地理位置来获取当前用户的lat / lng。

一旦我得到了这个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.

任何帮助都会很棒！谷歌阻止了zomato api处理我的应用程序，因为它会惩罚任何拥有sys 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请求相关的同源策略派对服务。

在代码中应用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），它将仅适用于此选项集。

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

1 个答案: