CODEWITHSUNDEEP
typescriptangular6
siva IT
siva IT

Reputation: 51

HttpClientModule http post with headers not working

I can't able to get the response from the server using angular httpclientmodule, I'm completely new to angular6 httpclientmodule, please find the below code

myservice.ts

import { Injectable } from '@angular/core';
import {Observable} from "rxjs/Observable";
import {HttpClient, HttpHeaders} from "@angular/common/http";
import { map } from 'rxjs/operators';
import { Headers, RequestOptions } from '@angular/http';
import 'rxjs/Rx';

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

  response: any;
  constructor(private http: HttpClient) { }


 getLogin(mobileNumber, loginPassword) {
  let headers= new HttpHeaders().set('Content-Type','application/json').set('X-Authorization','clientmobileClient1').set('username',mobileNumber).set('password',loginPassword);
    return this.http.post('http://My API URL', null, {headers}).map((response: any) => response.json());

  }
}

mycomponent.ts

 onSubmit() {
    this.service.getLogin(mobileNumber, loginPassword).subscribe((response: any) => { console.log("my response", response) });
}

Please help me out where I'm wrong.

thanks

Upvotes: 0

Views: 912

Answers (2)

Skel
Skel

Reputation: 1667

Personally, I use HTTP_INTERCEPTORS to add my headers to my HTTP request but. Here is how i set my headers for a request. I have noticed you are sending the username & password in the heads this is not best practice.

This is how i would do yours

getLogin(mobileNumber, loginPassword) {
  const headers = new HttpHeaders()
    .set('Content-Type','application/json')
    .set('X-Authorization','clientmobileClient1')
    .set('username',mobileNumber)
    .set('password',loginPassword);
  return this.http.post<any>(
    'http:://url.api',
    {}, // Because its a post request
    { headers: headers }
  ).pipe(map(response => {
    return response;
  }))
}

But i would rather do that as a get request like this

getLogin(mobileNumber, loginPassword) {
  const headers = new HttpHeaders()
    .set('Content-Type','application/json')
    .set('X-Authorization','clientmobileClient1')
    .set('username',mobileNumber)
    .set('password',loginPassword);
  return this.http.get<any>(
    'http:://url.api',
    { headers: headers }
  ).pipe(map(response => {
    return response;
  }))
}

But i would rather do it like this, With sending the sensitive data in the body of request. like below. But this will all depend on how you have write your API.

getLogin(mobileNumber, loginPassword) {
  const headers = new HttpHeaders()
    .set('Content-Type','application/json')
    .set('X-Authorization','clientmobileClient1');
  return this.http.post<any>(
    'http:://url.api',
    {
      mobileNumber,
      loginPassword
    },
    { headers: headers }
  ).pipe(map(response => {
    return response;
  }))
}

If needs i can include the code of setting up HTTP_INTERCEPTORS

Upvotes: 1

lesiano
lesiano

Reputation: 288

try this:

let Params = new HttpParams();
    Params = Params.append('username', mobileNumber);
    Params = Params.append('password', loginPassword);
const header = new HttpHeaders({ 'Content-Type': 'application/json','X- 
    Authorization':'clientmobileClient1' });
    var options = { headers: header, params: Params };
    return this.http.post('http://My API URL', {}, options);

Upvotes: 2

Related Questions