Usar un encabezado de autorización con Fetch en React Native

Estoy tratando de usar fetchReact Native para obtener información de la API de Product Hunt. Obtuve el token de acceso adecuado y lo guardé en estado, pero parece que no puedo pasarlo dentro del encabezado de autorización para una solicitud GET.

Esto es lo que tengo hasta ahora:

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

La expectativa que tengo para mi código es la siguiente:

1. Primero, obtendré fetchun token de acceso con datos de mi módulo API importado
2. Después de eso, estableceré la clientTokenpropiedad de this.stateigual al token de acceso recibido.
3. Luego, ejecutaré lo getPostsque debería devolver una respuesta que contenga una serie de publicaciones actuales de Product Hunt.

Puedo verificar que el token de acceso se está recibiendo y que lo this.stateestá recibiendo como su clientTokenpropiedad. También puedo verificar que getPostsse está ejecutando.

El error que recibo es el siguiente:

{"error": "unauthorized_oauth", "error_description": "Proporcione un token de acceso válido. Consulte nuestra documentación de api sobre cómo autorizar una solicitud de api. Asegúrese también de que necesita los ámbitos correctos. Por ejemplo," público privado \ "para acceder a puntos finales privados".}

He estado trabajando bajo la suposición de que de alguna manera no estoy pasando el token de acceso correctamente en mi encabezado de autorización, pero parece que no puedo entender exactamente por qué.

Ejemplo de búsqueda con encabezado de autorización:

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

Resulta que estaba usando el fetchmétodo incorrectamente.

fetch espera dos parámetros: un punto final para la API y un objeto opcional que puede contener cuerpo y encabezados.

Estaba envolviendo el objeto deseado dentro de un segundo objeto, lo que no me dio el resultado deseado.

Así es como se ve en un alto nivel:

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

Estructuré mi objeto como tal:

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

Tuve este problema idéntico, estaba usando django-rest-knox para los tokens de autenticación. Resulta que nada estaba mal con mi método de búsqueda que se veía así:

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

Estaba corriendo apache.

Lo resuelto este problema para mí fue cambiando WSGIPassAuthorizationa 'On'en wsgi.conf.

Tenía una aplicación Django implementada en AWS EC2, y usé Elastic Beanstalk para administrar mi aplicación, así que en el django.config, hice esto:

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