Question

我是React的新手，为了练习，我正在尝试构建一个从Yelp API获取信息的应用程序，但是我无法获得响应。 Yelp Fusion v3需要一个'access_token'（我已成功收到Postman的响应）。因此，要在我的应用程序中发出此请求，我正在使用Axios。当我在componentDidMount（）中发出这个请求时，作为我得到的响应

XMLHttpRequest无法加载https://api.yelp.com/v3/businesses/search?term=sushi&location=Boston。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:8080”访问。响应的HTTP状态代码为500。

虽然看起来我错误地指定了access_token和参数，但是当在单独的文件（不是应用程序的一部分）中运行相同的代码时，我得到了我在我的应用程序中寻找的JSON响应。

这是我的componentDidMount（）：

componentDidMount: function () {
    axios.get('https://api.yelp.com/v3/businesses/search?term=Sushi&location=Boston',{
        headers: {
            Authorization: `Bearer ${token}`
        }
    })
    .then(function(res){
        console.log(res)
    })
    .catch(function(err){
        console.log(err)
    })
},

我也尝试了Yelp节点模块，但我没有运气。请帮忙！

Answer 1

此错误是跨源错误。

Web浏览器可以捕获AJAX请求：它们需要发送到同一个源或由第三方本身授权，否则它们将被阻止。由于您无法控制Yelp，我建议您采取解决方法。

可用的解决方法

您使用 jsonp 之类的内容。此方法基本上包括在<script>标记中发出请求。服务器将响应包装在Javascript脚本中，并将其加载到页面。（https://en.wikipedia.org/wiki/JSONP）。服务器必须提供这种解决方法的格式才能工作。
您使用反向代理。您可以将NodeJS设置为一个。在此设置中，您将向您的原点发送 yelp 请求，该请求会将其重定向到yelp服务器。这是有效的，因为您的Node代理与浏览器没有相同的限制。（例如：https://github.com/nodejitsu/node-http-proxy）

可能还有其他方法可以解决这个问题，但这些方法很受欢迎。

希望这有帮助。

具有HTTP授权标头的API请求在componentDidMount内

1 个答案: