Verwenden eines Autorisierungsheaders mit Fetch in React Native

Ich versuche, fetchin React Native Informationen aus der Product Hunt-API abzurufen. Ich habe das richtige Zugriffstoken erhalten und im Status gespeichert, kann es jedoch anscheinend nicht im Autorisierungsheader für eine GET-Anforderung weitergeben.

Folgendes habe ich bisher:

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

Die Erwartung, die ich an meinen Code habe, ist folgende:

1. Zuerst werde ich fetchein Zugriffstoken mit Daten aus meinem importierten API-Modul erstellen
2. Danach setze ich die clientTokenEigenschaft von so this.state, dass sie dem empfangenen Zugriffstoken entspricht.
3. Dann werde ich ausführen, getPostswas eine Antwort zurückgeben sollte, die eine Reihe aktueller Beiträge von Product Hunt enthält.

Ich kann überprüfen, ob das Zugriffstoken empfangen wird und ob this.statees als seine clientTokenEigenschaft empfangen wird . Ich kann auch überprüfen, ob das ausgeführt getPostswird.

Der Fehler, den ich erhalte, ist folgender:

{"error": "unauthorized_oauth", "error_description": "Bitte geben Sie ein gültiges Zugriffstoken an. Informationen zum Autorisieren einer API-Anfrage finden Sie in unserer API-Dokumentation. Stellen Sie außerdem sicher, dass Sie die richtigen Bereiche benötigen. Beispiel:" private public \ " "für den Zugriff auf private Endpunkte."}

Ich habe die Annahme getroffen, dass ich das Zugriffstoken in meinem Autorisierungsheader irgendwie nicht richtig weitergebe, aber anscheinend nicht genau herausfinden kann, warum.

Beispielabruf mit Berechtigungsheader:

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

Es stellte sich heraus, dass ich die fetchMethode falsch angewendet habe.

fetch erwartet zwei Parameter: einen Endpunkt für die API und ein optionales Objekt, das Body und Header enthalten kann.

Ich wickelte das beabsichtigte Objekt in ein zweites Objekt ein, was mir kein gewünschtes Ergebnis brachte.

So sieht es auf hohem Niveau aus:

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

Ich habe mein Objekt so strukturiert:

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

Ich hatte dieses identische Problem, ich verwendete Django-Rest-Knox für Authentifizierungstoken. Es stellt sich heraus, dass an meiner Abrufmethode, die so aussah, nichts falsch war:

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

Ich habe Apache ausgeführt.

Was dieses Problem für mich löste, war der Wechsel WSGIPassAuthorizationzu 'On'in wsgi.conf.

Ich hatte einen Django - App auf AWS EC2 eingesetzt, und ich Elastic Beanstalk meine Anwendung zu verwalten, so in der django.configich dies tat:

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