एक्सेस कंट्रोल रिक्वेस्ट हेडर, AJAX अनुरोध में jQuery के साथ हेडर में जोड़ा जाता है

Question

मैं jQuery से AJAX POST अनुरोध में एक कस्टम हेडर जोड़ना चाहूंगा।

मैंने यह कोशिश की है:

$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
    //OR
    //beforeSend: function(xhr) { 
    //  xhr.setRequestHeader("My-First-Header", "first value"); 
    //  xhr.setRequestHeader("My-Second-Header", "second value"); 
    //}
}).done(function(data) { 
    alert(data);
});

जब मैं यह अनुरोध भेजता हूं और मैं FireBug के साथ देखता हूं, तो मुझे यह शीर्षक दिखाई देता है:

विकल्प xxxx / yyyy HTTP / 1.1
होस्ट: 127.0.0.1:6666
उपयोगकर्ता-एजेंट: मोज़िला / 5.0 (विंडोज NT 6.1; WOW64; rv: 11.0) गेको / 20100101 फ़ायरफ़ॉक्स / 11.0
स्वीकार करें: पाठ / एचटीएमएल, आवेदन / एक्सएचटीएमएल + xml, आवेदन / xml; q = 0.9, / ; q = 0.8
स्वीकार-भाषा: fr, fr-fr; q = 0.8, en-us; q = 0.5, en; q = 0.3
Accept-Encoding: gzip, deflate
Connection: keep -alive
मूल: अशक्त
पहुंच-नियंत्रण-अनुरोध-विधि: पोस्ट
पहुंच-नियंत्रण-अनुरोध-हेडर: मेरे-पहले हैडर, मेरे-दूसरी हैडर
Pragma: कोई कैश
कैश-नियंत्रण: नहीं कैश

मेरे कस्टम हेडर क्यों जाते हैं Access-Control-Request-Headers:

एक्सेस-कंट्रोल-रिक्वेस्ट-हेडर्स: माय-फर्स्ट-हेडर, माय-सेकंड-हेडर

मैं इस तरह से एक हेडर मान की उम्मीद कर रहा था:

My-First-Header: पहला मान
My-Second-Header: दूसरा मान

क्या यह संभव है?

Comments

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

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

प्रश्न का शीर्षक यह होना चाहिए कि "अन्य डोमेन के लिए"

— एकाउंटेंट एनएपी

Answer 1

आपने फ़ायरफ़ॉक्स में जो देखा वह वास्तविक अनुरोध नहीं था; ध्यान दें कि HTTP विधि विकल्प है, POST नहीं। यह वास्तव में 'पूर्व उड़ान' का अनुरोध था जो ब्राउज़र यह निर्धारित करने के लिए करता है कि क्या क्रॉस-डोमेन AJAX अनुरोध को अनुमति दी जानी चाहिए:

http://www.w3.org/TR/cors/

प्री-फ्लाइट अनुरोध में एक्सेस-कंट्रोल-रिक्वेस्ट-हेडर्स हेडर में वास्तविक अनुरोध में हेडर की सूची शामिल है। इसके बाद सर्वर को वापस रिपोर्ट करने की अपेक्षा की जाती है कि क्या ब्राउज़र के वास्तविक अनुरोध को सबमिट करने से पहले ये हेडर इस संदर्भ में समर्थित हैं या नहीं।

Answer 2

यहाँ एक उदाहरण है कि jQuery Ajax कॉल में अनुरोध शीर्षलेख कैसे सेट करें:

$.ajax({
  type: "POST",
  beforeSend: function(request) {
    request.setRequestHeader("Authority", authorizationToken);
  },
  url: "entities",
  data: "json=" + escape(JSON.stringify(createRequestObject)),
  processData: false,
  success: function(msg) {
    $("#results").append("The result =" + StringifyPretty(msg));
  }
});

Comments

thx, मुझे पता है कि कस्टम हैडर के साथ अजाक्स अनुरोध भेजें। मेरी समस्या अलग डोमेन के साथ है .. मेरे सभी कस्टम हेडर एक्सेस-कंट्रोल-रिक्वेस्ट-हेडर में डाल दिए गए हैं। यह ब्राउज़र में सिर्फ सुरक्षा है: क्रॉस-डोमेन।

— उंगली

हाँ, ब्राउज़र क्रॉस-डोमेन अनुरोधों में कुछ कठिनाइयों का कारण हो सकता है। आप हमेशा अपने क्रॉस-डोमेन अनुरोध भेजने के लिए कुछ प्रॉक्सी स्क्रिप्ट का उपयोग कर सकते हैं

— दूधोव्स्की

मैं एपीआई कुंजी के साथ हेडर कैसे जोड़ूं?

— Si8

@ Si8 कृपया इस पोस्ट की जाँच करें stackoverflow.com/questions/5517281/…

— milkovsky

Answer 3

नीचे दिया गया यह कोड मेरे लिए काम करता है। मैं हमेशा केवल एक उद्धरण का उपयोग करता हूं, और यह ठीक काम करता है। मेरा सुझाव है कि आपको केवल एकल उद्धरण या केवल दोहरे उद्धरण चिह्नों का उपयोग करना चाहिए , लेकिन मिश्रित नहीं।

$.ajax({
    url: 'YourRestEndPoint',
    headers: {
        'Authorization':'Basic xxxxxxxxxxxxx',
        'X-CSRF-TOKEN':'xxxxxxxxxxxxxxxxxxxx',
        'Content-Type':'application/json'
    },
    method: 'POST',
    dataType: 'json',
    data: YourData,
    success: function(data){
      console.log('succes: '+data);
    }
  });

Comments

thx, मुझे पता है कि कस्टम हैडर के साथ अजाक्स अनुरोध भेजें। मेरी समस्या विभिन्न डोमेन के साथ है .. मेरे सभी कस्टम हेडर एक्सेस-कंट्रोल-रिक्वेस्ट-हेडर में डाल दिए गए हैं। यह ब्राउज़र में सिर्फ सुरक्षा है: क्रॉस-डोमेन।

— फिंगर

धन्यवाद, मैंने हेडर सेट किया था: "प्राधिकरण: बेसिक XXXXXX" गलती से, और आईओएस 9 / सफारी 9 एक प्रोजेक्ट पर सिंटैक्सएयर्रम डोम 12 फेंक रहा था।

— मार्क

क्या आपका मतलब डबल या सिंगल कोट्स है? मुझे नहीं लगता कि कोई भी डबल ब्रैकेट का उपयोग करेगा।

— डीबीएस

डबल या सिंगल कोट्स ("कोष्ठक नहीं") का यहां कुछ भी नहीं है।

— पेरे

लारावेल 5.6 और इसके बाद के संस्करण के लिए अपने एक्स-सीएसआरएफ-टूकेन

— अब्दुल रहमान ए समद

Answer 4

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

यदि आप सर्वर पर CORS चालू करते हैं तो आपका कोड काम करेगा। आप यहां ( यहां ) जावास्क्रिप्ट का उपयोग कर सकते हैं

let url='https://server.test-cors.org/server?enable=true&status=200&methods=POST&headers=My-First-Header,My-Second-Header';


$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
}).done(function(data) {
    alert(data[0].request.httpMethod + ' was send - open chrome console> network to see it');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

यहाँ एक उदाहरण विन्यास है जो कॉर्न्स को nginx (nginx.conf फ़ाइल) में बदलता है:

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

यहाँ एक उदाहरण विन्यास है जो अपाचे (.htaccess फ़ाइल) पर CORS को चालू करता है

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

#Header set Access-Control-Allow-Origin "http://example.com:3000"
#Header always set Access-Control-Allow-Credentials "true"

Header set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

Answer 5

और यही कारण है कि आप जावास्क्रिप्ट के साथ एक बॉट नहीं बना सकते हैं, क्योंकि आपके विकल्प सीमित हैं कि ब्राउज़र आपको क्या करने की अनुमति देता है। आप बस एक ब्राउज़र का आदेश नहीं दे सकते जो कि कॉर्स नीति का अनुसरण करता है , जो कि अधिकांश ब्राउज़र का अनुसरण करते हैं, अन्य मूल को यादृच्छिक अनुरोध भेजने और आपको बस प्रतिक्रिया प्राप्त करने की अनुमति देते हैं!

इसके अतिरिक्त, यदि आपने कुछ अनुरोध शीर्षलेखों को मैन्युअल रूप से संपादित करने का प्रयास किया, जैसे origin-headerकि ब्राउज़र के साथ आने वाले डेवलपर्स टूल से, ब्राउज़र आपके संपादन को अस्वीकार कर देगा और प्रीफ़लाइट OPTIONSअनुरोध भेज सकता है ।

Answer 6

रैक-कॉर्स मणि का उपयोग करने का प्रयास करें । और अपने Ajax कॉल में हेडर फ़ील्ड जोड़ें।