কৌণিক এইচটিটিপি ক্লায়েন্টে এইচটিটিপি শিরোনাম যুক্ত করা শিরোনামটি প্রেরণ করে না, কেন?


178

আমার কোডটি এখানে:

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

এবং ডেটা 'রিকোয়েস্ট পেইলোড'-এ সংরক্ষণ করা হয় তবে আমার সার্ভারে POST মানগুলি পায় না:

print_r($_POST);
Array
(
)

আমি বিশ্বাস করি ত্রুটিটি পোষ্ট চলাকালীন সেট না হওয়া শিরোনাম থেকে এসেছে, আমি কী ভুল করেছি?


হ্যা ধন্যবাদ! তবে আমার ব্যাক-এন্ডে ডেটা না পাওয়ার পরে, আমি অ্যাপ্লিকেশনটিতে গিয়েছিলাম / x-www-form-urlencoded। যাইহোক মূল প্রশ্নটি সন্নিবিষ্ট
ফ্রেনটিক্স

কাস্টম শিরোনাম এবং ত্রুটি পরিচালনা freakyjolly.com/…
কোড স্পাই

উত্তর:


306

নতুন 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'}
});

50
মজাদার. সুতরাং, আমাদের ওও বিশ্ব থেকে আসা জন্য, setপদ্ধতির নাম কিছুটা বিভ্রান্তিকর।
তিশমা

3
আমি যদি একাধিক শিরোনাম সেট করতে চাই? আমি মন্তব্যটি শৃঙ্খলাবদ্ধ করার চেষ্টা করেছি HttpHeaders().set(..).set(..)কিন্তু এখন আবার শিরোনাম এইচটিটিপি শিরোলেখ ক্ষেত্রগুলিতে লেখা হচ্ছে না ?!
ডিসপ্লে নামটি

এটি src github.com/angular/angular/blob/master/packages/common/http/src/… অনুযায়ী ঠিকঠাক কাজ করা উচিত । আমি আপনার ইস্যু (কোড) সম্পর্কে আরও তথ্য ছাড়াই আপনাকে আর সহায়তা করতে পারি না
জোটা. টলেডো

সুতরাং আমার ক্ষেত্রে আমি একটি ফাংশনে আর্গুমেন্টের তালিকায় শিরোনাম এবং প্যারামগুলি স্যুইচ করে ভুল করেছি (যেহেতু উভয়ই একটি জসন বস্তু গ্রহণ করেছে)। অর্থ কেবল ভুলের দিকে নজর রাখুন, এবং টাইপ হিসাবে এইচটিপিএইচিডারগুলি সর্বোপরি একটি ভাল অনুশীলন .. অফ-বিষয়: আপনি যখন যে কোনও জায়গায় অবজেক্ট ব্যবহার করতে পারেন তখন টাইপস্ক্রিপ্ট ব্যবহার করবেন না তবে ভ্যানিলাজেএস।
বিপদ 89

3
শিরোনাম এবং অনুরোধগুলি কেন পরিবর্তনযোগ্য করা হয়েছে? কৌণিক.ইও
এইচটিটিপি

23

একাধিক প্যারাম বা শিরোনাম যুক্ত করতে আপনি নিম্নলিখিতটি করতে পারেন:

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 })

1
এই পদ্ধতিতেও কাজ হবে বলে মনে হয় না। মানে, আপনি শিরোনাম যুক্ত করতে পারেন এবং সেগুলি lazyUpdateসম্পত্তিতে প্রদর্শিত হবে, তবে শেষ পর্যন্ত এটি CreateListFromArrayLikeব্যতীত সাবস্ক্রাইব করে অনুরোধটিকে কার্যকর করার সময় ব্যতিক্রম সহ ক্রাশ হবে।
জাগো

3
একাধিক শিরোলেখ যুক্ত করতে ব্যবহার করুন: শিরোনাম: এইচটিপিএইচিডারস = নতুন এইচটিপিএইচাইডার্স ({'অ্যাপ্লিকেশন-আইডি': this.appId, "REST-API-key": this.apiKey, "সামগ্রী-প্রকার": "অ্যাপ্লিকেশন / json" son);
বেনসন

13

আপনার HTTP অনুরোধে নীচের মতো HTTP শিরোনাম সেট করুন

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

5

আমি দীর্ঘদিন ধরে এ নিয়ে লড়াই করেছি। আমি কৌনিক 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');

খুব কাজ করবে।


আপনার প্রথম প্রয়াসটি কাজ করা উচিত, আপনি শিরোনামের পরিবর্তনশীলকে সংযোজনের ফলাফল নির্ধারণ করছেন। এই মুহূর্তে আপনার ব্যাখ্যাটি কোনও অর্থবোধ করে না, বিশেষ করে আপনার শেষ অনুমান যে এটি যুক্ত let করতে পারে
জুয়ান মেন্ডেস

3

আমি কৌনিক 8 এর সাথে ছিলাম এবং আমার পক্ষে কাজ করা একমাত্র জিনিসটি ছিল:

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

2

ম্যানুয়ালটিতে ( https://angular.io/guide/http) ) আমি পড়েছি: এইচটিপিএইচইডার্স ক্লাসটি পরিবর্তনযোগ্য নয়, তাই প্রতিটি সেট () একটি নতুন উদাহরণ দেয় এবং পরিবর্তনগুলি প্রয়োগ করে।

নিম্নলিখিত কোডটি কৌনিক -4 দিয়ে আমার জন্য কাজ করে:

 এই http.get (url, {শিরোনাম: নতুন এইচটিপিএইচাইডার্স () সেট করুন ('ইউজার ইমেইল', ইমেল) return) ফিরিয়ে দিন;

0

আমার লিগ্যাসি অ্যাপে অ্যারে.ফ্রন্টের প্রোটোটাইপ জে এর কৌনিকের অ্যারের সাথে বিরোধী ছিল rom যা এই সমস্যা তৈরি করেছিল। আমি কৌনিকের অ্যারে.ফর্ম সংস্করণ সংরক্ষণ করে এবং প্রোটোটাইপ লোডের পরে এটি পুনরায় নিয়োগের মাধ্যমে সমাধান করেছি।


-3

ত্রুটি হ্যান্ডলিং এবং কাস্টম শিরোনাম সহ কৌনিক 8 এইচটিটিপি ক্লায়েন্ট পরিষেবার উদাহরণ

    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)
          )
      }

      ....
      ....

এখানে চিত্র বর্ণনা লিখুন

সম্পূর্ণ উদাহরণ টিউটোরিয়াল এখানে পরীক্ষা করুন


3
এটি কি আমি বা এই প্রশ্নটি জিজ্ঞাসা করার জন্য ওভারকিল?
ওজনোগওয়া জুড ওচালিফু

3
এটি ওপিএস প্রশ্নের উত্তর দেওয়ার চেষ্টা করছে না। এটি কোডের একগুচ্ছ যা কোনও ব্যাখ্যা নেই।
Jota.Toledo
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.