प्रतिक्रिया मूल में Fetch के साथ एक प्राधिकरण शीर्ष लेख का उपयोग करना

Question

मैं fetchप्रोडक्ट हंट एपीआई की जानकारी हड़पने के लिए रिएक्ट नेटिव में इस्तेमाल करने की कोशिश कर रहा हूं । मैंने उचित एक्सेस टोकन प्राप्त कर लिया है और इसे राज्य में सहेज लिया है, लेकिन GET अनुरोध के लिए प्राधिकरण शीर्षलेख के भीतर इसे पास करने में सक्षम नहीं लगता।

यहाँ मेरे पास अभी तक क्या है:

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अपने आयातित एपीआई मॉड्यूल से डेटा के साथ एक एक्सेस टोकन लूंगा
2. उसके बाद, मैं प्राप्त टोकन के बराबर clientTokenसंपत्ति सेट करूंगा this.state।
3. फिर, मैं चलाऊंगा getPostsजो उत्पाद हंट से वर्तमान पोस्ट की एक सरणी युक्त प्रतिक्रिया वापस करना चाहिए।

मैं यह सत्यापित करने में सक्षम हूं कि टोकन प्राप्त हो रहा है और वह this.stateइसे अपनी clientTokenसंपत्ति के रूप में प्राप्त कर रहा है । मैं यह सत्यापित करने में भी सक्षम हूं कि getPostsचलाया जा रहा है।

मैं जो त्रुटि प्राप्त कर रहा हूं वह निम्नलिखित है:

{"त्रुटि": "अनधिकृत_आयुथ", "error_description": "कृपया एक वैध पहुंच टोकन की आपूर्ति करें। हमारे एपीआई दस्तावेज को देखें कि कैसे एक एपीआई अनुरोध को अधिकृत किया जाए। कृपया यह भी सुनिश्चित करें कि आपको सही लिंक की आवश्यकता है। उदाहरण के लिए \" निजी सार्वजनिक \ " "निजी समापन बिंदु तक पहुँचने के लिए।"

मैं इस धारणा से काम कर रहा हूं कि मैं किसी तरह अपने ऑथराइजेशन हेडर में ठीक से एक्सेस टोकन के साथ नहीं गुजर रहा हूं, लेकिन ऐसा बिल्कुल नहीं लग पा रहा है।

Comments

जैसा कि इस एसओ में उल्लेख किया गया है , हेडर को लोअरकेस (कुछ सर्वर इस बात का सम्मान करते हैं, दूसरों का नहीं है।) मैं केवल इसलिए साझा करता हूं क्योंकि मुझे यह काट दिया गया था कि मैं खुद को नहीं जानता (और इस मुद्दे पर बहस करने की कोशिश में समय बर्बाद किया।) यह दुर्भाग्यपूर्ण है। इतने सारे प्रोजेक्ट, उदाहरण और लेख इस बात का सम्मान नहीं करते हैं।

— tj

@tj हैडर के नाम संवेदनशील नहीं हैं, और यह वही है जो आपके द्वारा जुड़े प्रश्न पर स्वीकृत + शीर्ष उत्तर कहता है।

— Coreyward

Answer 1

उदाहरण हेडर प्राधिकरण के साथ लाने के लिए:

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

Comments

यह मेरे लिए काम नहीं कर रहा है। 'Authorization'हैडर चुपचाप फ़ायरबग प्रति संलग्न करने के लिए विफल रहता है। मैं भी credentials: 'include'वैकल्पिक वस्तु में शामिल की कोशिश की है ।

— रॉनी रोइस्टन

@RonRoyston क्या आप विकल्प कॉल देख रहे हैं? अगर एपीआई एंडपॉइंट में कॉर्स सक्षम नहीं है (एक्सेस-कंट्रोल-अलाउंस-ओरिजिन: * यदि एक अलग डोमेन से एक्सेस हो रहा है), तो यह ऑप्‍शन कॉल में विफल हो सकता है।

— कोड़ी मोनिज़

एपीआई समापन बिंदु में कॉर्स सक्षम नहीं है, इसलिए शायद यही कारण है कि यह मेरे लिए काम नहीं करता है। धन्यवाद। मैंने फायरफॉक्स के लिए 'कॉर्स हर जगह' ऐड-ऑन स्थापित किया और यह काम कर गया।

— रोनी रोस्टन

इस मुद्दे को फिर से @RonRoyston देख रहा है, आपको btoa पुस्तकालय आयात करने की आवश्यकता है , जो नोड के मूल नहीं है। (यह एक ब्राउज़र लिब का पोर्ट है।) अन्यथा सामान्य हेडर निर्माण चुपचाप विफल हो जाता है। हम एक ही बात का अनुभव कर रहे थे।

— फ्रीवॉकर

developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch प्रति डॉक्स, के साथ हेडर लपेटने की जरूरत हैnew Headers()

— डैनियल डबॉवस्की

Answer 2

यह पता चला है, मैं fetchगलत तरीके से विधि का उपयोग कर रहा था ।

fetch दो मापदंडों की अपेक्षा करता है: एपीआई के लिए एक समापन बिंदु, और एक वैकल्पिक वस्तु जिसमें शरीर और हेडर हो सकते हैं।

मैं दूसरी वस्तु के भीतर इच्छित वस्तु को लपेट रहा था, जिससे मुझे कोई वांछित परिणाम नहीं मिला।

यहां बताया गया है कि यह उच्च स्तर पर कैसा दिखता है:

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

Comments

क्या आप शायद अब काम कर रहे कोड प्रदान कर सकते हैं? मैं एक प्राधिकरण हेडर के साथ भ्रूण का उपयोग करने की कोशिश कर रहा हूं और मुझे नहीं लगता कि मेरा ऑर्टिकल कोड हेडर के रूप में पारित हो रहा है, क्योंकि मुझे 401प्रतिक्रिया मिल रही है ।

— गोल्डनबिट

हो गया, आशा है कि यह मददगार है

— रिचर्ड खो

ओह, मैं उस उदाहरण के साथ आपकी व्यक्तिगत साइट पर गया हूँ! इस तरह मैंने पहली बार मेरा मॉडलिंग किया। मैंने अपना मुद्दा सुलझा लिया, हालांकि, यह सिर्फ इतना था कि मेरा यूआरएल गलत था। यह /अंत में आवश्यक था कि मैं गायब था ...

— GoldenBeet

धन्यवाद, यह मददगार था। यह देखते हुए कि भ्रूण के प्रलेखन से यह पता चलता है कि भ्रूण कुकीज़ को नहीं संभालता है, आप मैन्युअल रूप से कुकीज़ को इस कोड के साथ हेडर में जोड़ सकते हैं। बस यूआईडी और की को सेव करें और कुछ ऐसा करें: var obj = {विधि: 'GET', हेडर: {'Accept': 'application / json', 'Content-Type': 'application / json', 'Cookie': 'uid =' + uid + '; कुंजी = '+ कुंजी});

— डस्टिन

Answer 3

मुझे यह समान समस्या थी, मैं प्रमाणीकरण टोकन के लिए django-rest-knox का उपयोग कर रहा था। यह पता चला है कि मेरे लाने के तरीके में कुछ भी गलत नहीं था जो इस तरह दिखता था:

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

मैं अपाचे चला रहा था।

क्या मेरे लिए इस समस्या का समाधान बदल रहा था WSGIPassAuthorizationकरने के लिए 'On'में wsgi.conf।

मेरे पास AWS EC2 पर एक Django ऐप तैनात था, और मैंने अपने एप्लिकेशन को प्रबंधित करने के लिए इलास्टिक बीनस्टॉक का उपयोग किया, इसलिए django.config, मैंने ऐसा किया:

container_commands:
  01wsgipass:
    command: 'echo "WSGIPassAuthorization On" >> ../wsgi.conf'

Answer 4

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