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

Question

我正在尝试在 React Native 中使用 fetch 从 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. 首先，我将从导入的 API 模块中 fetch 包含数据的访问令牌

2. 之后，我将 this.state 的 clientToken 属性设置为 this.state 到的访问令牌。

3. 然后，我将运行 getPosts ，它应该返回一个包含 Product Hunt 的当前帖子数组的响应。

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

我收到的错误如下：

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

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

原文由 Richard Kho 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

事实证明我错误地使用了 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'
 })
 }

原文由 Richard Kho 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用授权标头获取示例：

 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'
});

原文由 Cody Moniz 发布，翻译遵循 CC BY-SA 4.0 许可协议