在React Native中将授权标头与Fetch一起使用

2020/11/14 00:22 · javascript ·  · 0评论

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

这是我到目前为止的内容:

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 \ “用于访问专用端点。”}

我一直在进行以下假设:我不知道如何在我的授权标头中正确传递访问令牌,但似乎无法弄清楚原因。

使用授权标头获取示例:

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

事实证明,我使用的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'
  })

我遇到了同样的问题,我在使用django-rest-knox作为身份验证令牌。事实证明,我的fetch方法看起来没有问题,如下所示:

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

我正在跑步阿帕奇。

为我解决了这个问题的原因是更改WSGIPassAuthorization'On'in wsgi.conf

我在AWS EC2上部署了Django应用程序,并使用Elastic Beanstalk管理我的应用程序,因此在中django.config,我这样做:

container_commands:
  01wsgipass:
    command: 'echo "WSGIPassAuthorization On" >> ../wsgi.conf'
completed = (id) => {
    var details = {
        'id': id,

    };

    var formBody = [];
    for (var property in details) {
        var encodedKey = encodeURIComponent(property);
        var encodedValue = encodeURIComponent(details[property]);
        formBody.push(encodedKey + "=" + encodedValue);
    }
    formBody = formBody.join("&");

    fetch(markcompleted, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: formBody
    })
        .then((response) => response.json())
        .then((responseJson) => {
            console.log(responseJson, 'res JSON');
            if (responseJson.status == "success") {
                console.log(this.state);
                alert("your todolist is completed!!");
            }
        })
        .catch((error) => {
            console.error(error);
        });
};
本文地址:http://javascript.askforanswer.com/zaireact-nativezhongjiangshouquanbiaotouyufetchyiqishiyong.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!