Angular 6 Http Request Json Headers Doesn't Works

I'm just trying to make a post using Angular 6 HttpClient, but the problem is that it doesn't send the data if HttpHeaders is in the options params.
That just happens with 'Content-Type': 'application/json'.

AuthComponentTS:

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {HttpClient, HttpHeaders} from '@angular/common/http';

@Injectable({
providedIn: 'root'
})

export class AuthService {

httpOptions = {headers: new HttpHeaders({ 'Content-Type': 'application/json' })};
api = 'http://localhost:3000/api/login';

constructor(private http: HttpClient) {}

login(form): Observable<any> {
const body = JSON.stringify(form);
console.log(form);
return this.http.post<any>(this.api, body, this.httpOptions);
}

authenticationHandler(): boolean {
const token = sessionStorage.getItem('token');
return !token;
}
}


LoginComponentTS:

import {Component, OnInit, ViewChild} from '@angular/core';
import {AuthService} from '../../services/auth.service';

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
hide = true;

constructor(private authService: AuthService) { }

ngOnInit() {}

login(form): void {
this.authService.login(form.value)
.subscribe(res => {
console.log(res);
}, error => {
console.log(error);
});
}

}


LoginComponentHTML:










<form #form="ngForm" action="javascript:void(0)" (submit)="login(form)">
<mat-form-field>
<input matInput name="username" ngModel placeholder="Digite seu usuário">
</mat-form-field>
<mat-form-field>
<input matInput name="password" ngModel placeholder="Digite sua senha" [type]="hide ? 'password' : 'text'">
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
</mat-form-field>

Login

{{form.value | json}}

</form>
</div>
</div>
</div>
</div>

Request From Angular (Failed! Always Pending):

Request From Postman (Works just fine):

I appreciate for helps!

PS: Posting in postman works just fine...
– André
Jul 2 at 2:40

You mean the login function is working fine before without an httpOptions? Because I think you are having a problem with your body since you stringify it and putted inside your http post parameter. try to return this.http.post<any>(this.api, form, this.httpOptions)
– Jer
Jul 2 at 3:11

login

httpOptions

body

stringify

return this.http.post<any>(this.api, form, this.httpOptions)

I have tried it already... I mean: I can post using another format like: application/x-www-form-urlencoded
– André
Jul 2 at 3:16

then? what happen? can you please add your code where you are calling the login?
– Jer
Jul 2 at 3:19

There we go... I have been updated the post.
– André
Jul 2 at 3:26

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

- July 07, 2018

angular

• Get link
• Facebook
• Twitter
• Pinterest
• Email
• Other Apps