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

javascript fetch-api react-native oauth-2.0

2022-08-30 01:26:19

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

以下是我到目前为止所拥有的：

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();
  },

我对代码的期望如下：

首先，我将使用导入的API模块中的数据创建一个访问令牌fetch
之后，我将设置的属性等于收到的访问令牌。clientTokenthis.state
然后，我将运行它应该返回一个响应，其中包含来自Product Hunt的当前帖子数组。getPosts

我能够验证是否正在接收访问令牌，以及是否将其作为其属性接收。我还能够验证它正在运行。this.stateclientTokengetPosts

我收到的错误如下：

{“error”：“unauthorized_oauth”、“error_description”：“请提供有效的访问令牌。请参阅我们的 API 文档，了解如何授权 API 请求。另请确保您需要正确的示波器。例如，“private public\” for to access private endpoints.“}

我一直在假设我没有以某种方式在我的授权标头中正确传递访问令牌，但似乎无法弄清楚确切的原因。

答案 1

使用授权标头的抓取示例：

fetch('URL_GOES_HERE', { 
    method: 'post', 
    headers: new Headers({
        'Authorization': 'Basic '+btoa('username:password'), 
        'Content-Type': 'application/x-www-form-urlencoded'
    }), 
    body: 'A=1&B=2'
});

答案 2

事实证明，我错误地使用了该方法。fetch

fetch接受两个参数：API 的终结点，以及可以包含正文和标头的可选对象。

我将目标对象包装在第二个对象中，这并没有给我带来任何期望的结果。

以下是它在高层次上的外观：

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

我按如下方式构建了我的选项对象：

    var options = {  
      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'
      })
    }