Axios POST अनुरोध के साथ हेडर पास करना

Question

मैंने npm पैकेज प्रलेखन से अनुशंसित के रूप में एक अक्षीय POST अनुरोध लिखा है:

var data = {
    'key1': 'val1',
    'key2': 'val2'
}
axios.post(Helper.getUserAPI(), data)       
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

और यह काम करता है, लेकिन अब मैंने हेडर स्वीकार करने के लिए अपने बैकएंड एपीआई को संशोधित किया है।

सामग्री-प्रकार: 'आवेदन / json'

प्राधिकरण: 'JWT fefege ...'

अब, यह अनुरोध पोस्टमैन पर ठीक काम करता है, लेकिन जब एक axios कॉल लिखते हैं, तो मैं इस लिंक का पालन करता हूं और काम करने के लिए इसे प्राप्त नहीं कर सकता।

मुझे लगातार 400 BAD Requestत्रुटि हो रही है।

यहाँ मेरा संशोधित अनुरोध है:

axios.post(Helper.getUserAPI(), {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'JWT fefege...'
    },
    data
})      
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

कोई भी मदद बहुत ही सराहनीय होगी।

Answer 1

कस्टम हेडर को पास करने के लिए अक्षतंतु का उपयोग करते समय, अंतिम तर्क के रूप में हेडर युक्त ऑब्जेक्ट की आपूर्ति करें

अपने axios अनुरोध को संशोधित करें जैसे:

const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'JWT fefege...'
}

axios.post(Helper.getUserAPI(), data, {
    headers: headers
  })
  .then((response) => {
    dispatch({
      type: FOUND_USER,
      data: response.data[0]
    })
  })
  .catch((error) => {
    dispatch({
      type: ERROR_FINDING_USER
    })
  })

Comments

@KishoreJethava, 500 आंतरिक सर्वर त्रुटि है, क्या आप सर्वर की तरफ देख सकते हैं कि हेडर आ रहे हैं या कोई अन्य बग है

— शुभम खत्री

@ किशोर जयदेव, क्या आप सिर्फ हेडर को अपने सर्वर में लॉग इन कर सकते हैं और देख सकते हैं कि क्या आपको सही मान मिल रहा है

— शुभम खत्री

क्या आपको कोई डेटा पोस्ट करने की आवश्यकता नहीं है? यह भी सुनिश्चित करें कि यह .state.token में एक मान है

— शुभम खत्री

आइए हम इस चर्चा को चैट में जारी रखते हैं ।

— किशोर जेठवा

@ शुभम खत्री, क्या मैं आपसे axiosसंबंधित प्रश्न पर एक नज़र डालने के लिए कह सकता हूं : stackoverflow.com/questions/59470085/… ?

— इस्तियाक अहमद

Answer 2

यहाँ कस्टम हेडर के साथ एक axios.post अनुरोध का एक पूरा उदाहरण है

var postData = {
  email: "[e-mail]",
  password: "password"
};

let axiosConfig = {
  headers: {
      'Content-Type': 'application/json;charset=UTF-8',
      "Access-Control-Allow-Origin": "*",
  }
};

axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
.then((res) => {
  console.log("RESPONSE RECEIVED: ", res);
})
.catch((err) => {
  console.log("AXIOS ERROR: ", err);
})

Comments

अनुरोध प्राप्त करने के लिए इस समस्या का सामना कर रहे हैं। प्रतिक्रिया xml प्रारूप में आ रही है। यह समस्या को हल नहीं करता है।

— इस्वर

Answer 3

यह सहायक हो सकता है,

const data = {
  email: "[e-mail]",
  username: "me"
};

const options = {
  headers: {
      'Content-Type': 'application/json',
  }
};

axios.post('http://path', data, options)
 .then((res) => {
   console.log("RESPONSE ==== : ", res);
 })
 .catch((err) => {
   console.log("ERROR: ====", err);
 })

नोट: 400 से ऊपर के सभी स्टेटस कोड एक्सियो कैच ब्लॉक में पकड़े जाएंगे। इसके अलावा, हेडर Axios में पोस्ट विधि के लिए वैकल्पिक हैं

Blockquote

Blockquote

Answer 4

शुभम का जवाब मेरे काम नहीं आया।

जब आप axios लाइब्रेरी का उपयोग कर रहे हैं और कस्टम हेडर पास करने के लिए, आपको हेडर को एक ऑब्जेक्ट के रूप में बनाने की आवश्यकता है जिसका नाम "हेडर" है। हेडर कुंजी में एक ऑब्जेक्ट होना चाहिए, यहां यह सामग्री-प्रकार और प्राधिकरण है।

नीचे उदाहरण ठीक काम कर रहा है।

    var headers = {
        'Content-Type': 'application/json',
        'Authorization': 'JWT fefege...' 
    }
    axios.post(Helper.getUserAPI(), data, {"headers" : headers})

        .then((response) => {
            dispatch({type: FOUND_USER, data: response.data[0]})
        })
        .catch((error) => {
            dispatch({type: ERROR_FINDING_USER})
        })

Answer 5

हेडर को पास करने के लिए आप इंटरसेप्टर्स का भी इस्तेमाल कर सकते हैं

यह आपको बहुत सारे कोड बचा सकता है

axios.interceptors.request.use(config => {
  if (config.method === 'POST' || config.method === 'PATCH' || config.method === 'PUT')
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

  const accessToken = AuthService.getAccessToken();
  if (accessToken) config.headers.Authorization = 'Bearer ' + accessToken;

  return config;
});

Comments

मैं उपयोग करने का सुझाव config.method.toUpperCase()

— कॉन्स्टेंटाइन

@ कॉन्सटेंटाइन मुझे लगता है कि यह पहले से ही ऊपरी मामला है

— इज़राइल kusayev

दुर्भाग्य से, मेरा कम था

— कॉन्सटेंटाइन

Answer 6

या, यदि आप vuejs प्रोटोटाइप से कुछ संपत्ति का उपयोग कर रहे हैं जो निर्माण पर नहीं पढ़ी जा सकती है तो आप हेडर को परिभाषित कर सकते हैं और बता सकते हैं अर्थात

storePropertyMaxSpeed(){
                axios.post('api/property', {
                    "property_name" : 'max_speed',
                    "property_amount" : this.newPropertyMaxSpeed
                    },
                    {headers :  {'Content-Type': 'application/json',
                                'Authorization': 'Bearer ' + this.$gate.token()}})
                  .then(() => { //this below peace of code isn't important 
                    Event.$emit('dbPropertyChanged');

                    $('#addPropertyMaxSpeedModal').modal('hide');

                    Swal.fire({
                        position: 'center',
                        type: 'success',
                        title: 'Nova brzina unešena u bazu',
                        showConfirmButton: false,
                        timer: 1500
                        })
                })
                .catch(() => {
                     Swal.fire("Neuspješno!", "Nešto je pošlo do đavola", "warning");
                })
            }
        },

Answer 7

Json को दोहरे उद्धरण चिह्नों के साथ प्रारूपित किया जाना है

पसंद:

headers: {
                "Content-Type": "application/Jason",
                "Authorization": "JWT fefege..."
            }

न सिर्फ:

headers: {
                'Content-Type': 'application/json',
                'Authorization': 'JWT fefege...'
         }

Comments

यह JSON प्रारूप के लिए सही है, लेकिन जावास्क्रिप्ट का उपयोग करते समय, आप जावास्क्रिप्ट स्ट्रिंग लिख सकते हैं जो आप चाहते हैं और यह अभी भी काम करेगा - क्योंकि axons में JSON धारावाहिक का अंतर पता नहीं है! :-)

— जोनो