मैं js या jQuery के साथ ajax अनुरोध में एक कस्टम HTTP हेडर कैसे जोड़ सकता हूं?

Question

क्या कोई जानता है कि जावास्क्रिप्ट या jQuery का उपयोग करके एक कस्टम HTTP हेडर कैसे जोड़ना या बनाना है?

Answer 1

वहाँ कई समाधान आप क्या जरूरत पर निर्भर करता है ...

यदि आप किसी व्यक्तिगत अनुरोध में एक कस्टम हेडर (या हेडर का सेट) जोड़ना चाहते headersहैं तो संपत्ति जोड़ें :

// Request with custom header
$.ajax({
    url: 'foo/bar',
    headers: { 'x-my-custom-header': 'some value' }
});

यदि आप हर अनुरोध में एक डिफ़ॉल्ट हेडर (या हेडर का सेट) जोड़ना चाहते हैं तो उपयोग करें $.ajaxSetup():

$.ajaxSetup({
    headers: { 'x-my-custom-header': 'some value' }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Overwrites the default header with a new header
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

यदि आप हर अनुरोध में एक हेडर (या हेडर का सेट) जोड़ना चाहते हैं तो beforeSendहुक का उपयोग करें $.ajaxSetup():

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('x-my-custom-header', 'some value');
    }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Sends both custom headers
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

संपादित करें (अधिक जानकारी): एक बात का पता होना चाहिए कि ajaxSetupआप केवल डिफ़ॉल्ट हेडर के एक सेट को परिभाषित कर सकते हैं और आप केवल एक को परिभाषित कर सकते हैं beforeSend। यदि आप ajaxSetupकई बार कॉल करते हैं, तो केवल हेडर का अंतिम सेट भेजा जाएगा और केवल आखिरी पहले-कॉलबैक निष्पादित होगा।

Comments

क्या होता है अगर मैं एक नया beforeSendकरते हुए परिभाषित करता हूं $.ajax?

— कोस्टा

आप केवल एक beforeSendकॉलबैक को परिभाषित कर सकते हैं । यदि आप $.ajaxSetup({ beforeSend: func... })दो बार कॉल करते हैं तो दूसरा कॉलबैक केवल वही होगा जो आग लगाता है।

— प्रेस्टुल जूल 15'13

के बारे में अधिक जानकारी जोड़ने के लिए मेरे उत्तर को अपडेट किया ajaxSetup।

— प्रेस्टुल जूल 15'13

ऐसा लगता है कि यह कोरस अनुरोध (हर ब्राउज़र) के साथ काम नहीं करता है। क्या आसपास कोई काम है ?

— svassr

@ Si8, जो मेरे लिए एक क्रॉस डोमेन इश्यू की तरह दिखता है। आप एक डोमेन से दूसरे डोमेन के लिए अनुरोध नहीं कर सकते। कोर्स में देखने की कोशिश करें और देखें कि क्या मदद करता है।

— प्रेस्टाटुल

Answer 2

या, यदि आप भविष्य के प्रत्येक अनुरोध के लिए कस्टम हेडर भेजना चाहते हैं, तो आप निम्नलिखित का उपयोग कर सकते हैं:

$.ajaxSetup({
    headers: { "CustomHeader": "myValue" }
});

इस तरह से हर भविष्य के अजाक्स अनुरोध में कस्टम हेडर शामिल होंगे, जब तक कि अनुरोध के विकल्पों द्वारा स्पष्ट रूप से ओवरराइड नहीं किया जाएगा। आप यहाँ पर अधिक जानकारी पा सकते हैंajaxSetup

Comments

जहां मैं वास्तव में इसे पूरा करना चाहता हूं, यह वास्तव में काम नहीं करता है।

— ट्रिप

वैसे आपको यह सुनिश्चित करना चाहिए कि वास्तविक ajax कॉल से पहले ajaxSetup कहा जाता है। मैं किसी भी अन्य कारण से नहीं जानता कि यह काम क्यों नहीं करेगा :)

— शीलार्ड मुज़ेइ

Answer 3

JQuery के अजाक्स को मानते हुए, आप जैसे कस्टम हेडर जोड़ सकते हैं -

$.ajax({
  url: url,
  beforeSend: function(xhr) {
    xhr.setRequestHeader("custom_header", "value");
  },
  success: function(data) {
  }
});

Answer 4

यहाँ XHR2 का उपयोग करके एक उदाहरण दिया गया है:

function xhrToSend(){
    // Attempt to creat the XHR2 object
    var xhr;
    try{
        xhr = new XMLHttpRequest();
    }catch (e){
        try{
            xhr = new XDomainRequest();
        } catch (e){
            try{
                xhr = new ActiveXObject('Msxml2.XMLHTTP');
            }catch (e){
                try{
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }catch (e){
                    statusField('\nYour browser is not' + 
                        ' compatible with XHR2');                           
                }
            }
        }
    }
    xhr.open('POST', 'startStopResume.aspx', true);
    xhr.setRequestHeader("chunk", numberOfBLObsSent + 1);
    xhr.onreadystatechange = function (e) {
        if (xhr.readyState == 4 && xhr.status == 200) {
            receivedChunks++;
        }
    };
    xhr.send(chunk);
    numberOfBLObsSent++;
}; 

उम्मीद है की वो मदद करदे।

यदि आप अपना ऑब्जेक्ट बनाते हैं, तो आप नाम भेजने के लिए setRequestHeader फ़ंक्शन का उपयोग कर सकते हैं, और अनुरोध भेजने से पहले एक मान।

Comments

हालांकि यह 2011 में सही हो सकता है, यह आम तौर पर पहिया को सुदृढ़ नहीं करने के लिए एक अच्छा विचार है, और इसके बजाय एक AJAX पुस्तकालय जैसे कि Zepto या jQuery का उपयोग करें।

— दान डैस्कलेस्कु

जब तक आप किसी मौजूदा XHR2 कॉल में हेडर जोड़ने की कोशिश नहीं कर रहे हैं और इसके लिए सिर्फ jQuery का उपयोग करने के लिए इसे फिर से लिखना शुरू नहीं करना चाहते हैं ... जिस बिंदु पर, @gryzzly का एकमात्र व्यवहार्य उत्तर है।

— रोरवीटिट

@AliGajani समस्या यह है कि कुछ एप्लिकेशन या लाइब्रेरी (जैसे कि THREE.js) $.ajax*फ़ंक्शन का उपयोग नहीं करते हैं b / c वे jQuery पर निर्भर नहीं करते हैं और इसके बजाय XHR का उपयोग करते हैं इसलिए यह उन मामलों में एकमात्र वैध विकल्प है।

— कोबर्न

@ आलियाजानी इसके अलावा, यह सिर्फ नेटवर्क लोड समय नहीं है, बल्कि लाइब्रेरी का पार्सिंग समय है। इसके अलावा, यदि आप सावधान नहीं हैं कि आप किन निर्भरताओं को जोड़ते हैं, तो आप बहुत अधिक निर्भरता के साथ जल्दी से एक परियोजना प्राप्त कर सकते हैं

— ओज़्टैको - मोनिका सी।

Answer 5

आप jQuery का उपयोग किए बिना भी ऐसा कर सकते हैं। XMLHttpRequest की भेजने की विधि को ओवरराइड करें और वहां शीर्ष लेख जोड़ें:

XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send;
var newSend = function(vData) {
    this.setRequestHeader('x-my-custom-header', 'some value');
    this.realSend(vData);
};
XMLHttpRequest.prototype.send = newSend;

Answer 6

आपको डॉक्स$.ajaxSetup() में वर्णित के उपयोग से बचना चाहिए । इसके बजाय निम्नलिखित का उपयोग करें:

$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
    jqXHR.setRequestHeader('my-custom-header', 'my-value');
});

Answer 7

यह मानते हुए कि आप "जब अजाक्स का उपयोग कर रहे हैं" और "एक HTTP अनुरोध हेडर" का अर्थ है , तो उस headersसंपत्ति का उपयोग करें जिसे आप पास करते हैंajax()

हेडर (जोड़ा 1.5)

चूक: {}

अनुरोध के साथ भेजने के लिए अतिरिक्त हेडर कुंजी / मान जोड़े का एक नक्शा। यह सेटिंग पहले फ़ंक्शन को कॉल करने से पहले सेट की गई है; इसलिए, हेडर सेटिंग के किसी भी मान को पहले के फ़ंक्शन के भीतर से अधिलेखित किया जा सकता है।

- http://api.jquery.com/jQuery.ajax/

Answer 8

XMLHttpRequest ऑब्जेक्ट की "setRequestHeader" विधि का उपयोग किया जाना चाहिए

http://help.dottoro.com/ljhcrlbv.php

Answer 9

आप जेएस भ्रूण का उपयोग कर सकते हैं

async function send(url,data) {
  let r= await fetch(url, {
        method: "POST", 
        headers: {
          "My-header": "abc"  
        },
        body: JSON.stringify(data), 
  })
  return await r.json()
}

// Example usage

let url='https://server.test-cors.org/server?enable=true&status=200&methods=POST&headers=my-header';

async function run() 
{
 let jsonObj = await send(url,{ some: 'testdata' });
 console.log(jsonObj[0].request.httpMethod + ' was send - open chrome console > network to see it');
}

run();