एक HTTP हेडर को कोणीय HttpClient में जोड़ने से हेडर नहीं भेजा जाता है, क्यों?

Question

यहाँ मेरा कोड है:

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

---

logIn(username: string, password: string) {
    const url = 'http://server.com/index.php';
    const body = JSON.stringify({username: username,
                                 password: password});
    const headers = new HttpHeaders();
    headers.set('Content-Type', 'application/json; charset=utf-8');
    this.http.post(url, body, {headers: headers}).subscribe(
        (data) => {
            console.log(data);
        },
        (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
                console.log('Client-side error occured.');
            } else {
                console.log('Server-side error occured.');
            }
        }
    );
}

और यहां नेटवर्क डीबग करें:

Request Method:POST
Status Code:200 OK
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:46
Content-Type:text/plain

और डेटा 'रिक्वेस्ट पेलोड' में संग्रहीत हैं, लेकिन मेरे सर्वर में पोस्ट मान नहीं मिले हैं:

print_r($_POST);
Array
(
)

मेरा मानना ​​है कि त्रुटि POST के दौरान सेट किए गए हेडर से आती है, मैंने क्या गलत किया?

Comments

हाँ धन्यवाद! लेकिन मेरे बैक-एंड पर डेटा प्राप्त नहीं करने के बाद, मैं एप्लिकेशन / x-www-form-urlencoded में गया। वैसे भी मुख्य प्रश्न aserwerd है

— फ्रेननेटिक्स

कस्टम हेडर और एरर हैंडलिंग freakyjolly.com/ के

— कोड जासूस

Answer 1

नए HttpHeaderवर्ग के उदाहरण अपरिवर्तनीय वस्तुएं हैं। परिणाम के रूप में क्लास के तरीकों को लागू करने से एक नया उदाहरण वापस आएगा। तो मूल रूप से, आपको निम्न कार्य करने की आवश्यकता है:

let headers = new HttpHeaders();
headers = headers.set('Content-Type', 'application/json; charset=utf-8');

या

const headers = new HttpHeaders({'Content-Type':'application/json; charset=utf-8'});

अद्यतन: कई हेडर जोड़ना

let headers = new HttpHeaders();
headers = headers.set('h1', 'v1').set('h2','v2');

या

const headers = new HttpHeaders({'h1':'v1','h2':'v2'});

अपडेट: HttpClient हेडर और परम के लिए ऑब्जेक्ट मैप स्वीकार करें

चूंकि 5.0.0-beta.6 अब HttpHeadersऑब्जेक्ट के निर्माण को तर्क के रूप में सीधे ऑब्जेक्ट मैप को छोड़ना संभव है । तो अब निम्नलिखित करना संभव है:

http.get('someurl',{
   headers: {'header1':'value1','header2':'value2'}
});

Comments

दिलचस्प। इसलिए, हमारे लिए ऊ दुनिया से आने वाला, setविधि नाम कुछ भ्रामक है।

— tishma

क्या होगा यदि मैं कई हेडर सेट करना चाहता हूं? मैंने टिप्पणी को चेन करने की कोशिश की है, HttpHeaders().set(..).set(..)लेकिन अब फिर से हेडर HTTP हेडर फ़ील्ड में नहीं लिखे जा रहे हैं ?!

— डिस्प्लेनाम

यह src github.com/angular/angular/blob/master/packages/common/http/src/… के अनुसार ठीक काम करना चाहिए । मैं आपके मुद्दे (कोड) के बारे में अधिक जानकारी के बिना आपकी कोई मदद नहीं कर सकता

— Jota.Toledo

इसलिए मेरे मामले में मैंने एक समारोह के लिए तर्कों की सूची में हेडर और पैरामेट्स को स्विच करके एक गलती की (क्योंकि दोनों ने एक अस्वीकृति को स्वीकार किया)। मतलब सिर्फ गलतियों के लिए बाहर देखो, और प्रकार के रूप में HttpHeaders सब के बाद एक अच्छा अभ्यास है .. ऑफ-विषय: जब आप हर जगह वस्तुओं का उपयोग कर सकते हैं, तो टाइपस्क्रिप्ट का उपयोग न करें लेकिन वेनिलाजेएस।

— खतरे 89

हेडर और अनुरोधों को अपरिवर्तनीय क्यों बनाया गया है? angular.io/guide/http#immutability

— ड्रेलेगोर

Answer 2

गुणकों या शीर्षकों को जोड़ने के लिए आप निम्नलिखित कार्य कर सकते हैं:

constructor(private _http: HttpClient) {}

//....

const url = `${environment.APP_API}/api/request`;

let headers = new HttpHeaders().set('header1', hvalue1); // create header object
headers = headers.append('header2', hvalue2); // add a new header, creating a new object
headers = headers.append('header3', hvalue3); // add another header

let params = new HttpParams().set('param1', value1); // create params object
params = params.append('param2', value2); // add a new param, creating a new object
params = params.append('param3', value3); // add another param 

return this._http.get<any[]>(url, { headers: headers, params: params })

Comments

यह विधि भी काम नहीं लगती है। मेरा मतलब है, आप हेडर जोड़ सकते हैं, और वे lazyUpdateसंपत्ति में दिखाएंगे , लेकिन अंततः यह CreateListFromArrayLikeअनुरोध को प्रभावी बनाने के लिए अपवाद के साथ दुर्घटनाग्रस्त हो जाएगा ।

— जागो

कई हेडर का उपयोग करने के लिए: हेडर: HttpHeaders = new HttpHeaders ({'Application-Id': this.appId, "REST-API-Key": this.apiKey, "सामग्री-प्रकार": "एप्लिकेशन / json"});

— बेन्सन

Answer 3

अपने HTTP अनुरोध में http हेडर नीचे सेट करें

return this.http.get(url, { headers: new HttpHeaders({'Authorization': 'Bearer ' + token})
 });

Answer 4

मैं लंबे समय तक इससे जूझता रहा। मैं Angular 6 का उपयोग कर रहा हूं और मैंने पाया कि

let headers = new HttpHeaders();
headers = headers.append('key', 'value');

काम नहीं किया। लेकिन क्या काम था

let headers = new HttpHeaders().append('key', 'value');

किया, जब समझ में आता है कि वे अपरिवर्तनीय हैं। इसलिए एक ऐसा हेडर बनाया है जिसे आप इसमें शामिल नहीं कर सकते। मैंने इसकी कोशिश नहीं की है, लेकिन मुझे संदेह है

let headers = new HttpHeaders();
let headers1 = headers.append('key', 'value');

काम भी करेगा।

Comments

आपका पहला प्रयास काम करना चाहिए, आप हेडर चर के लिए परिशिष्ट का परिणाम बता रहे हैं। अभी आपकी व्याख्या का कोई मतलब नहीं है, विशेष रूप से आपका अंतिम अनुमान है कि इसे जोड़ने से इसे ठीक किया let जा सकता है

— जुआन मेंडेस

Answer 5

मैं एंगुलर 8 के साथ था और केवल एक चीज जो मेरे लिए काम करती थी वह थी:

  getCustomHeaders(): HttpHeaders {
    const headers = new HttpHeaders()
      .set('Content-Type', 'application/json')
      .set('Api-Key', 'xxx');
    return headers;
  }

Answer 6

मैनुअल ( https://angular.io/guide/http ) में मैंने पढ़ा: HttpHeaders वर्ग अपरिवर्तनीय है, इसलिए हर सेट () एक नया उदाहरण देता है और परिवर्तनों को लागू करता है।

निम्न कोड मेरे लिए कोणीय -4 के साथ काम करता है:

 इसे वापस करें ।http.get (url, {हेडर: नया HttpHeaders ()) सेट ('उपयोगकर्ता नाम', ईमेल)});

Answer 7

मेरी विरासत ऐप Array.from में प्रोटोटाइप js को कोणीय Array.from के साथ विरोध किया गया था जो इस समस्या का कारण बन रहा था। मैंने इसे कोणीय के ऐरे.फ्रॉम संस्करण को सहेजकर और प्रोटोटाइप लोड के बाद इसे पुनः असाइन करके हल किया।

Answer 8

त्रुटि हैंडलिंग और कस्टम हैडर के साथ कोणीय 8 HttpClient सेवा उदाहरण

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
    import { Student } from '../model/student';
    import { Observable, throwError } from 'rxjs';
    import { retry, catchError } from 'rxjs/operators';

    @Injectable({
      providedIn: 'root'
    })
    export class ApiService {

      // API path
      base_path = 'http://localhost:3000/students';

      constructor(private http: HttpClient) { }

      // Http Options
      httpOptions = {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        })
      }

      // Handle API errors
      handleError(error: HttpErrorResponse) {
        if (error.error instanceof ErrorEvent) {
          // A client-side or network error occurred. Handle it accordingly.
          console.error('An error occurred:', error.error.message);
        } else {
          // The backend returned an unsuccessful response code.
          // The response body may contain clues as to what went wrong,
          console.error(
            `Backend returned code ${error.status}, ` +
            `body was: ${error.error}`);
        }
        // return an observable with a user-facing error message
        return throwError(
          'Something bad happened; please try again later.');
      };


      // Create a new item
      createItem(item): Observable<Student> {
        return this.http
          .post<Student>(this.base_path, JSON.stringify(item), this.httpOptions)
          .pipe(
            retry(2),
            catchError(this.handleError)
          )
      }

      ....
      ....

पूर्ण उदाहरण ट्यूटोरियल की जाँच करें यहाँ

Comments

क्या यह मुझसे पूछा गया सवाल है।

— ओजोनुग्वा जूड ओचलिफु

यह OPs प्रश्न का उत्तर देने का प्रयास नहीं कर रहा है। इसके कोड का एक गुच्छा जो कोई स्पष्टीकरण नहीं है।

— जोटा.टोलिडो