angular - एपीआई प्रतिक्रिया से प्रतिक्रिया हेडर पढ़ें-कोणीय 5+टाइपस्क्रिप्ट




http typescript (4)

आप इस तरह से पोस्ट प्रतिक्रिया हेडर से डेटा प्राप्त कर सकते हैं (कोणीय 6):

import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
  observe: 'response' as 'response'
};

this.http.post(link,body,httpOptions).subscribe((res: HttpResponse<any>) => {
  console.log(res.headers.get('token-key-name'));
})

मैं एक HTTP अनुरोध ट्रिगर कर रहा हूँ और मुझे इससे एक वैध प्रतिक्रिया मिल रही है। प्रतिक्रिया में एक हेडर एक्स-टोकन भी है जिसे मैं पढ़ना चाहता हूं। मैं हेडर को पढ़ने के लिए नीचे दिए गए कोड की कोशिश कर रहा हूं, हालांकि, मुझे परिणामस्वरूप शून्य मिलता है

this.currentlyExecuting.request = this.http.request(reqParams.type, reqParams.url, {
    body: reqParams.body,
    responseType: 'json',
    observe: 'response'
}).subscribe(
    (_response: any) => {
        // Also tried _response.headers.init();
        const header = _response.headers.get('X-Token');
        console.log(header);
        onComplete(_response.body);
     },
    _error => {
        onComplete({
            code: -1,
            message: Constants.WEBSERVICE_INTERNET_NOT_CONNNECTED
        });
    }
);

Chrome की जांच में API की प्रतिक्रिया, जब पता चलता है कि हेडर मौजूद है। StackOverflow पर कई संबंधित प्रश्नों को देखने की कोशिश की लेकिन कुछ भी मदद नहीं मिली।


आप नीचे दिए गए कोड का उपयोग करके हेडर प्राप्त कर सकते हैं

let main_headers = {}
this.http.post(url,
  {email: this.username, password: this.password},
  {'headers' : new HttpHeaders ({'Content-Type' : 'application/json'}), 'responseType': 'text', observe:'response'})
  .subscribe(response => {
    const keys = response.headers.keys();
    let headers = keys.map(key => {
      `${key}: ${response.headers.get(key)}`
        main_headers[key] = response.headers.get(key)
       }
      );
  });

बाद में हम आवश्यक हेडर बना सकते हैं जोसन ऑब्जेक्ट है।

header_list['X-Token']

क्या आपने एक्स-टोकन को सर्वर की ओर से उजागर किया है? "एक्सेस-कंट्रोल-एक्सपोज़-हेडर्स" का उपयोग करना। क्योंकि क्लाइंट की ओर से सभी हेडर को एक्सेस करने की अनुमति नहीं है, इसलिए आपको उन्हें सर्वर साइड से एक्सपोज़ करने की आवश्यकता है

आपके दृश्यपटल में भी, आप { HTTP observe: 'response'} { observe: 'response'} का उपयोग करके पूर्ण प्रतिक्रिया प्राप्त करने के लिए नए HTTP मॉड्यूल का उपयोग कर सकते हैं

http
  .get<any>('url', {observe: 'response'})
  .subscribe(resp => {
    console.log(resp.headers.get('X-Token'));
  });

जैसा कि हृषिकेश काले ने बताया है कि हमें एक्सेस-कंट्रोल-एक्सपोज़-हेडर्स पास करना होगा।

यहाँ हम इसे WebAPI / MVC वातावरण में कैसे कर सकते हैं:

response.addHeader("Access-Control-Expose-Headers", "Authorization");
response.addHeader("Access-Control-Allow-Headers", "Authorization, X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept, X-Custom-header");
response.addHeader(HEADER_STRING, TOKEN_PREFIX + token); // HEADER_STRING == Authorization

दूसरा तरीका यह है कि हम webApiconfig.cs फ़ाइल में नीचे जैसा कोड जोड़ सकते हैं।

this.authenticationService.login(this.f.email.value, this.f.password.value)
  .pipe(first())
  .subscribe(
    (data: HttpResponse<any>) => {
      console.log(data.headers.get('authorization'));
    },
    error => {
      this.loading = false;
    });

** हम नीचे के रूप में web.config फ़ाइल में कस्टम हेडर जोड़ सकते हैं। *

return this.http.post<any>(Constants.BASE_URL + 'login', {username: username, password: password},
  {observe: 'response' as 'body'})
  .pipe(map(user => {
       return user;
  }));

हम एक विशेषता बना सकते हैं और विधि को विशेषता के साथ घोषित कर सकते हैं।

हैप्पी कोडिंग !!





angular5