API 使用 HTTP 授权请求 Header 在 componentDidMount 内部

Question

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

XMLHttpRequest cannot load https://api.yelp.com/v3/businesses/search?term=sushi&location=Boston. 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:8080' is therefore not allowed access. The response had HTTP status code 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）

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

希望对您有所帮助。

API 使用 HTTP 授权请求 Header 在 componentDidMount 内部

API Request with HTTP Authorization Header inside of componentDidMount

yelp

reactjs

axios