Menggunakan header otorisasi dengan Fetch in React Native

Saya mencoba menggunakan fetchdi React Native untuk mengambil informasi dari API Perburuan Produk. Saya telah memperoleh Token Akses yang tepat dan telah menyimpannya ke Status, tetapi tampaknya tidak dapat meneruskannya dalam header Otorisasi untuk permintaan GET.

Inilah yang saya miliki sejauh ini:

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

Harapan yang saya miliki untuk kode saya adalah sebagai berikut:

1. Pertama, saya akan fetchmendapatkan token akses dengan data dari modul API yang saya impor
2. Setelah itu, saya akan mengatur clientTokenproperti this.statemenjadi sama dengan token akses yang diterima.
3. Kemudian, saya akan menjalankan getPostsyang seharusnya mengembalikan respons yang berisi larik posting saat ini dari Product Hunt.

Saya dapat memverifikasi bahwa token akses telah diterima dan this.statemenerimanya sebagai clientTokenpropertinya. Saya juga dapat memverifikasi bahwa getPostssedang dijalankan.

Kesalahan yang saya terima adalah sebagai berikut:

{"error": "unauthorized_oauth", "error_description": "Berikan token akses yang valid. Lihat dokumentasi api kami tentang cara mengotorisasi permintaan api. Pastikan juga Anda memerlukan cakupan yang benar. Misalnya \" private public \ "untuk mengakses titik akhir pribadi."}

Saya telah mengerjakan asumsi bahwa saya entah bagaimana tidak meneruskan token akses dengan benar di header otorisasi saya, tetapi tampaknya tidak dapat mengetahui dengan tepat mengapa.

Contoh pengambilan dengan header otorisasi:

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

Ternyata, saya salah menggunakan fetchmetode tersebut.

fetch mengharapkan dua parameter: titik akhir ke API, dan objek opsional yang dapat berisi isi dan header.

Saya membungkus objek yang dimaksud dalam objek kedua, yang tidak memberi saya hasil yang diinginkan.

Berikut tampilannya pada level tinggi:

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

Saya menyusun objek saya seperti:

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

Saya mengalami masalah yang sama, saya menggunakan django-rest-knox untuk token otentikasi. Ternyata tidak ada yang salah dengan metode pengambilan saya yang terlihat seperti ini:

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

Saya menjalankan apache.

Apa yang memecahkan masalah ini bagi saya berubah WSGIPassAuthorizationmenjadi 'On'masuk wsgi.conf.

Saya memiliki aplikasi Django yang diterapkan di AWS EC2, dan saya menggunakan Elastic Beanstalk untuk mengelola aplikasi saya, jadi di django.config, saya melakukan ini:

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