Reactjs componentDidMount中包含HTTP授权标头的API请求

我对反应和实践都很陌生，我正在尝试构建一个从yelpapi获取信息的应用程序，但是我在获得响应时遇到了困难。Yelp Fusion v3需要一个“访问令牌”，我已经在Postman中成功地收到了该令牌作为响应。因此，为了在我的应用程序中提出这个请求，我使用Axios。当我在componentDidMount内部发出此请求时，作为响应，我得到

无法加载XMLHttpRequest。对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。因此，不允许“源”访问。响应的HTTP状态代码为500

尽管看起来我没有正确地指定access_令牌和参数，但当在单独的文件（不是应用程序的一部分）中运行相同的代码时，我会得到我在应用程序中寻找的JSON响应

这是我的组件：

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节点模块，但没有成功。请帮忙

此错误是一个跨原点错误

Web浏览器有一个AJAX请求的陷阱：它们需要发送到同一个来源，或者由第三方自己授权，否则它们会被阻止。既然你无法控制Yelp，我建议你采取变通办法

可用的变通办法

您可以使用类似jsonp的东西。此方法基本上包括在标记中发出请求。服务器将把响应封装在Javascript脚本中，并将其加载到页面中。服务器必须提供此格式，该变通方法才能工作。 使用反向代理。您可以将nodej设置为一个节点。在此设置中，您将向您的源站发出yelp请求，由源站将其重定向到yelp服务器。这是因为节点代理没有与浏览器相同的限制。前任： 也许还有其他方法可以解决这个问题，但这些都是流行的方法

---

希望这能有所帮助。

这很有道理，我犯了很多“CORS”错误，不太明白是什么。您认为使用Express设置API是在app.get中发出请求并返回JSON的最佳方式吗？您可以这样做，这样可以保护您的yelp API密钥。不要在Javascript代码中存储任何敏感信息。您可以创建一个后端，该后端将拥有yelpapi的密钥，并为您的应用程序提供所需的数据。这似乎是一个敏感的计划^^