在componentDidMount内部具有HTTP授权标头的API请求 [英] API Request with HTTP Authorization Header inside of componentDidMount

问题描述

我对React还是很陌生，在实践中，我试图构建一个从Yelp API获取信息的应用程序，但是我很难获得响应. Yelp Fusion v3需要一个"access_token"(我已经在邮递员中作为响应成功收到).因此，要在我的应用程序中发出此请求，我正在使用Axios.当我在componentDidMount()内发出此请求时，作为响应，我得到

I'm very new to React, and to practice, I am trying to build an application that fetches information from the Yelp API, but I'm having trouble getting a response. Yelp Fusion v3 requires an 'access_token'(which I've successfully received as a response in Postman). So to make this request in my application, I am using Axios. When I am making this request inside of componentDidMount(), as a response I get

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

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响应.

Though it may seem that I am incorrectly specifying the access_token and parameters, when running the same code in a separate file(not part of the application), I get the JSON response that I am looking for in my app.

这是我的componentDidMount():

Here is my 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节点模块，但是我没有运气.请帮忙！

I've tried the Yelp node module as well, but I am having no luck. Please help!

推荐答案

此错误是跨域错误.

Web浏览器在处理AJAX请求时遇到了麻烦:它们必须寻址到相同的来源或由第三方本身授权，否则将被阻止.由于您无法控制Yelp，因此建议您采取一种解决方法.

Web browsers have a catch with AJAX requests: They need to be addressed to the same origin or be authorized by the third-party itself, otherwise they are blocked. Since you have no control over Yelp, I suggest you take a workaround.

可用的解决方法

• 您使用的是 jsonp 之类的东西.此方法主要包括在<script>标记中发出请求.服务器会将响应包装在Javascript脚本中，然后将其加载到页面中. ( https://en.wikipedia.org/wiki/JSONP ).服务器必须提供这种格式才能使该解决方法正常工作.
• 您使用反向代理.您可以将NodeJS设置为一个.在此设置中，您将向您的来源发出 yelp 请求，该请求会将其重定向到yelp服务器.之所以可行，是因为您的Node代理与您的浏览器没有相同的限制. (例如: https://github.com/nodejitsu/node-http-proxy )

• You use something like jsonp. This method basically consists in making the request in a <script> tag. The server will wrap the response inside a Javascript script and it will be loaded unto the page. (https://en.wikipedia.org/wiki/JSONP). The server MUST offer this format for that workaround to work.
• You use a reverse proxy. You can set NodeJS to act as one. In this setup, you will make your yelp request to your origin who will redirect it to the yelp server. This works because your Node proxy does not have the same limitations as your browser. (ex: https://github.com/nodejitsu/node-http-proxy)

也许还有其他方法可以解决这个问题，但是那些是流行的方法.

There may be other ways to get around this, but those are popular methods.

希望这会有所帮助.

这篇关于在componentDidMount内部具有HTTP授权标头的API请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！