小编典典

在 React Native 中使用带有 Fetch 的授权标头

all

我正在尝试fetch在 React Native 中使用从 Product Hunt API
中获取信息。我已经获得了正确的访问令牌并将其保存到状态,但似乎无法在 GET 请求的授权标头中传递它。

这是我到目前为止所拥有的:

var Products = React.createClass({
  getInitialState: function() {
    return {
      clientToken: false,
      loaded: false
    }
  },
  componentWillMount: function () {
    fetch(api.token.link, api.token.object)
      .then((response) => response.json())
      .then((responseData) => {
          console.log(responseData);
        this.setState({
          clientToken: responseData.access_token,
        });
      })
      .then(() => {
        this.getPosts();
      })
      .done();
  },
  getPosts: function() {
    var obj = {
      link: 'https://api.producthunt.com/v1/posts',
      object: {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + this.state.clientToken,
          'Host': 'api.producthunt.com'
        }
      }
    }
    fetch(api.posts.link, obj)
      .then((response) => response.json())
      .then((responseData) => {
        console.log(responseData);
      })
      .done();
  },

我对代码的期望如下:

  1. 首先,我将fetch使用来自我导入的 API 模块的数据的访问令牌
  2. 之后,我会将 的clientToken属性设置this.state为等于收到的访问令牌。
  3. 然后,我将运行getPosts它应该返回一个响应,其中包含来自 Product Hunt 的一系列当前帖子。

我能够验证正在接收访问令牌并将this.state其作为其clientToken属性接收。我还能够验证getPosts正在运行。

我收到的错误如下:

{“error”:”unauthorized_oauth”, “error_description”:”请提供有效的访问令牌。有关如何授权 api
请求,请参阅我们的 api 文档。还请确保您需要正确的范围。例如 "private public\ ” 用于访问私有端点。”}

我一直在假设我没有在我的授权标头中正确传递访问令牌,但似乎无法弄清楚究竟是为什么。


阅读 65

收藏
2022-07-12

共1个答案

小编典典

事实证明,我使用的fetch方法不正确。

fetch需要两个参数:API 的端点,以及可以包含正文和标头的可选对象。

我将预期的对象包装在第二个对象中,这没有给我任何想要的结果。

这是它在高层次上的样子:

fetch('API_ENDPOINT', OBJECT)  
  .then(function(res) {
    return res.json();
   })
  .then(function(resJson) {
    return resJson;
   })

我这样构造我的对象:

var obj = {  
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Origin': '',
    'Host': 'api.producthunt.com'
  },
  body: JSON.stringify({
    'client_id': '(API KEY)',
    'client_secret': '(API SECRET)',
    'grant_type': 'client_credentials'
  })
}
2022-07-12