Utilizzo di un'intestazione di autorizzazione con Fetch in React Native

Sto cercando di utilizzare fetchReact Native per ottenere informazioni dall'API Product Hunt. Ho ottenuto il token di accesso corretto e l'ho salvato nello stato, ma non riesco a passarlo all'interno dell'intestazione di autorizzazione per una richiesta GET.

Ecco cosa ho finora:

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

L'aspettativa che ho per il mio codice è la seguente:

1. Innanzitutto, farò fetchun token di accesso con i dati dal mio modulo API importato
2. Successivamente, imposterò la clientTokenproprietà di this.stateuguale al token di accesso ricevuto.
3. Quindi, eseguirò getPostsche dovrebbe restituire una risposta contenente una serie di post correnti da Product Hunt.

Sono in grado di verificare che il token di accesso sia stato ricevuto e che lo this.statestia ricevendo come clientTokenproprietà. Sono anche in grado di verificare che getPostsè in esecuzione.

L'errore che sto ricevendo è il seguente:

{"errore": "unauthorized_oauth", "error_description": "Fornisci un token di accesso valido. Consulta la nostra documentazione API su come autorizzare una richiesta API. Assicurati inoltre di richiedere gli ambiti corretti. Ad esempio" pubblico privato \ "per accedere agli endpoint privati."}

Ho lavorato sul presupposto che in qualche modo non sto passando il token di accesso correttamente nella mia intestazione di autorizzazione, ma non riesco a capire esattamente il perché.

Esempio di recupero con intestazione di autorizzazione:

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

Si scopre che stavo usando il fetchmetodo in modo errato.

fetch prevede due parametri: un endpoint per l'API e un oggetto opzionale che può contenere body e header.

Stavo avvolgendo l'oggetto desiderato in un secondo oggetto, che non mi ha dato alcun risultato desiderato.

Ecco come appare ad alto livello:

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

Ho strutturato il mio oggetto come tale:

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

Ho avuto questo identico problema, stavo usando django-rest-knox per i token di autenticazione. Si scopre che non c'era nulla di sbagliato nel mio metodo di recupero che assomigliava a questo:

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

Stavo correndo Apache.

Ciò che risolto questo problema per me era che cambia WSGIPassAuthorizationa 'On'in wsgi.conf.

Avevo distribuito un'app Django su AWS EC2 e ho usato Elastic Beanstalk per gestire la mia applicazione, quindi in django.config, ho fatto questo:

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