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

Question

我正在尝试使用“反应原生”中的获取功能从产品搜索 API 中获取信息。我已获得正确的访问令牌并将其保存到 State，但似乎无法在 GET 请求的授权标头中传递它。

到目前为止，我有以下情况：

var Products = React.createClass({
  getInitialState: function() {
    return {
      clientToken: false,
      loaded: false
    }
  },
  componentWillMount: function () {
    fetch(api.token.link, api.token.object)
      .then((response) => response.html" target="_blank">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();
  },

我对代码的期望如下:

< li >首先，我将从导入的API模块中< code >获取带有数据的访问令牌 < li >之后，我将< code>this.state的< code>clientToken属性设置为等于接收的访问令牌。 < li >然后，我将运行< code>getPosts,它将返回一个响应，其中包含来自产品搜索的一组当前帖子。

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

我收到的错误如下:

{“错误”：“unauthorized_oauth”、“error_description”：“请提供有效的访问令牌。请参阅我们的 API 文档，了解如何授权 API 请求。还要确保需要正确的作用域。例如，用于访问专用终结点的“专用公共”。

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

Answer 1

我也有同样的问题，我使用django-rest-knox作为认证令牌。事实证明，我的fetch方法看起来没有任何问题，如下所示:

...
    let headers = {"Content-Type": "application/json"};
    if (token) {
      headers["Authorization"] = `Token ${token}`;
    }
    return fetch("/api/instruments/", {headers,})
      .then(res => {
...

我正在跑。

对我来说，解决这个问题的方法是将WSGIPassAuthoration更改为wsgi.conf中的'On'。

我在 AWS EC2 上部署了一个 Django 应用程序，并且我使用弹性豆茎来管理我的应用程序，因此在 django.config 中，我执行了以下操作：

container_commands:
  01wsgipass:
    command: 'echo "WSGIPassAuthorization On" >> ../wsgi.conf'

Answer 2

原来我不正确地使用了fetch方法。

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

我将预期的对象包装在第二个对象中，这没有得到任何期望的结果。

下面是它在高层次上的样子:

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

Answer 3

具有授权标头的提取示例：

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