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

Question

我对 React 非常陌生，为了练习，我正在尝试构建一个从 Yelp API 获取信息的应用程序，但我无法获得响应。 Yelp Fusion v3 需要一个“access_token”（我已在 Postman 中成功收到该响应）。所以为了在我的应用程序中提出这个请求，我使用的是 Axios。当我在 componentDidMount() 中发出这个请求时，作为响应，我得到 ​​p>

XMLHttpRequest 无法加载 https://api.yelp.com/v3/businesses/search?term=sushi&location=Boston。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，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）

可能有其他方法可以解决这个问题，但这些都是流行的方法。

希望这会有所帮助。