एक कस्टम हेडर जोड़कर कोणीय.जेएस का उपयोग करके HTTP अनुरोध

Question 1

मैं angular.js के लिए एक नौसिखिया हूँ, और मैं एक अनुरोध में कुछ हेडर जोड़ने की कोशिश कर रहा हूँ:

   var config = {headers: {
            'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
            'Accept': 'application/json;odata=verbose'
        }
    };

   $http.get('https://www.example.com/ApplicationData.svc/Malls(1)/Retailers', config).success(successCallback).error(errorCallback);

मैंने सभी दस्तावेज़ों को देखा है, और यह मुझे लगता है कि यह सही होना चाहिए।

जब मैं URL के लिए एक स्थानीय फ़ाइल का उपयोग करता $http.getहूं, तो मुझे क्रोम में नेटवर्क टैब पर निम्न HTTP अनुरोध दिखाई देता है:

GET /app/data/offers.json HTTP/1.1
Host: www.example.com
Connection: keep-alive
Cache-Control: max-age=0
If-None-Match: "0f0abc9026855b5938797878a03e6889"
Authorization: Basic Y2hhZHN0b25lbWFuOkNoYW5nZV9tZQ==
Accept: application/json;odata=verbose
X-Requested-With: XMLHttpRequest
If-Modified-Since: Sun, 24 Mar 2013 15:58:55 GMT
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
X-Testing: Testing
Referer: http://www.example.com/app/index.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

जैसा कि आप देख सकते हैं, दोनों हेडर सही ढंग से जोड़े गए थे। लेकिन जब मैं $http.getऊपर दिखाए गए URL को बदल देता हूं (वास्तविक पते का उपयोग करने के अलावा, उदाहरण.कॉम नहीं), तो मुझे मिलता है:

OPTIONS /ApplicationData.svc/Malls(1) HTTP/1.1
Host: www.datahost.net
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://mpon.site44.com
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
Access-Control-Request-Headers: accept, origin, x-requested-with, authorization, x-testing
Accept: */*
Referer: http://mpon.site44.com/app/index.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

इन दोनों के बीच के कोड में एकमात्र अंतर यह है कि पहले URL एक स्थानीय फ़ाइल है, और दूसरे के लिए URL एक दूरस्थ सर्वर है। यदि आप दूसरे अनुरोध हेडर को देखते हैं, तो कोई प्रमाणीकरण हेडर नहीं है, और Acceptनिर्दिष्ट के बजाय डिफ़ॉल्ट का उपयोग करता प्रतीत होता है। इसके अलावा, पहली पंक्ति अब OPTIONSइसके बजाय GET(हालांकि ) कहती Access-Control-Request-Methodहै GET।

किसी भी विचार जो उपरोक्त कोड के साथ गलत है, या स्थानीय हेडर को डेटा स्रोत के रूप में उपयोग नहीं करने पर अतिरिक्त हेडर कैसे प्राप्त करें?

Question 2

मैंने वही लिया जो आपके पास था, और एक और X-Testingहेडर जोड़ा

var config = {headers:  {
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json;odata=verbose',
        "X-Testing" : "testing"
    }
};

$http.get("/test", config);

और क्रोम नेटवर्क टैब में, मुझे लगता है कि उन्हें भेजा जा रहा है।

GET /test HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Accept: application/json;odata=verbose
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
Authorization: Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==
X-Testing: testing
Referer: http://localhost:3000/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

क्या आप उन्हें ब्राउज़र से, या सर्वर पर नहीं देख रहे हैं? ब्राउज़र टूलींग या डिबग प्रॉक्सी का प्रयास करें और देखें कि क्या भेजा जा रहा है।

Question 3

HTTP POST विधि का उपयोग करके मूल प्रमाणीकरण:

$http({
    method: 'POST',
    url: '/API/authenticate',
    data: 'username=' + username + '&password=' + password + '&email=' + email,
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Login-Ajax-call": 'true'
    }
}).then(function(response) {
    if (response.data == 'ok') {
        // success
    } else {
        // failed
    }
});

... और हेडर के साथ विधि प्राप्त करें:

$http({
    method: 'GET',
    url: '/books',
    headers: {
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json',
        "X-Login-Ajax-call": 'true'
    }
}).then(function(response) {
    if (response.data == 'ok') {
        // success
    } else {
        // failed
    }
});

Question 4

यदि आप अपने कस्टम हेडर को सभी अनुरोधों में जोड़ना चाहते हैं, तो आप इस http को जोड़ने के लिए $ httpProvider पर चूक को बदल सकते हैं ...

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common = { 
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json;odata=verbose'
      };
}]);

Question 5

मेरा सुझाव एक फंक्शन कॉल सेटिंग्स जोड़ना होगा जैसे फंक्शन के अंदर हेडर को चेक करें जो इसके लिए उपयुक्त है। मुझे यकीन है कि यह निश्चित रूप से काम करेगा। यह पूरी तरह से मेरे लिए काम कर रहा है।

function getSettings(requestData) {
    return {
        url: requestData.url,
        dataType: requestData.dataType || "json",
        data: requestData.data || {},
        headers: requestData.headers || {
            "accept": "application/json; charset=utf-8",
            'Authorization': 'Bearer ' + requestData.token
        },
        async: requestData.async || "false",
        cache: requestData.cache || "false",
        success: requestData.success || {},
        error: requestData.error || {},
        complete: requestData.complete || {},
        fail: requestData.fail || {}
    };
}

फिर अपने डेटा को इस तरह से कॉल करें

    var requestData = {
        url: 'API end point',
        data: Your Request Data,
        token: Your Token
    };

    var settings = getSettings(requestData);
    settings.method = "POST"; //("Your request type")
    return $http(settings);

Question 6

विकल्प के अनुरोध के लिए आप जो देखते हैं वह ठीक है। प्राधिकरण के हेडर इसमें उजागर नहीं किए गए हैं।

: लेकिन काम करने के लिए मूल प्रमाणीकरण के लिए आपको जोड़ने की जरूरत है withCredentials = true;अपने को var config।

AngularJS $ http प्रलेखन से :

withCredentials - {boolean}- withCredentials XHR ऑब्जेक्ट पर ध्वज सेट करना है या नहीं । अधिक जानकारी के लिए क्रेडेंशियल के साथ अनुरोध देखें ।

Question 7

और सर्वर से उत्तर क्या है? यह 204 का जवाब देना चाहिए और फिर वास्तव में आपके द्वारा अनुरोधित GET भेजें।

विकल्प में क्लाइंट जाँच कर रहा है कि क्या सर्वर कोर्स अनुरोधों की अनुमति देता है। यदि यह आपको 204 से अलग कुछ देता है तो आपको सही अनुमति-मूल शीर्ष लेख भेजने के लिए अपने सर्वर को कॉन्फ़िगर करना चाहिए।

जिस तरह से आप हेडर जोड़ रहे हैं, वह करने का सही तरीका है।

Question 8

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

सरल अनुरोधों (ऊपर चर्चा की गई) के विपरीत, "पहले से बताए गए" अनुरोध पहले यह बताने के लिए कि क्या वास्तविक अनुरोध भेजने के लिए सुरक्षित है, अन्य डोमेन पर संसाधन के लिए विकल्प विधि द्वारा एक HTTP अनुरोध भेजें। क्रॉस-साइट अनुरोध इस तरह से पूर्वनिर्मित हैं क्योंकि उनके उपयोगकर्ता डेटा के लिए निहितार्थ हो सकते हैं। विशेष रूप से, एक अनुरोध पूर्वनिर्धारित है यदि:

यह GET, HEAD या POST के अलावा अन्य तरीकों का उपयोग करता है। इसके अलावा, यदि POST का उपयोग अनुप्रयोग / x-www-form-urlencoded, मल्टीपार्ट / फॉर्म-डेटा या पाठ / सादे के अलावा अन्य सामग्री-प्रकार के साथ अनुरोध डेटा भेजने के लिए किया जाता है, जैसे कि यदि POST अनुरोध सर्वर पर XML पेलोड भेजता है आवेदन / xml या पाठ / xml का उपयोग कर, तो अनुरोध पूर्वनिर्धारित है। यह अनुरोध में कस्टम हेडर सेट करता है (जैसे अनुरोध एक्स-पिंगोथ्रर जैसे हेडर का उपयोग करता है)

रेफरी: क्रोम में AJAX GET / POST / PUT / DELETE के बजाय विकल्प भेज रहा है?

Question 9

मेरे लिए निम्नलिखित व्याख्यात्मक स्निपेट ने काम किया। शायद आपको 'हेडर नाम के लिए उपयोग नहीं करना चाहिए ?

{
   headers: { 
      Authorization: "Basic " + getAuthDigest(), 
      Accept: "text/plain" 
   }
}

मैं उपयोग कर रहा हूं $http.ajax(), हालांकि मैं यह उम्मीद नहीं करूंगा कि गेम चेंजर बनना है।