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:

<div class="position-absolute d-flex w-100 h-100">
<div class="container m-auto">
<div class="row">
<div class="col-10 col-sm-8 m-auto p-3">
<div class="logo">
<img src="../../../../src/assets/img/logo.png">
</div>
<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>
<div class="text-center">
<button mat-raised-button color="primary" type="submit">
Login
</button>
{{form.value | json}}
</div>
</form>
</div>
</div>
</div>
</div>


Request From Angular (Failed! Always Pending):

Request From Postman (Works just fine):

I appreciate for helps!

login

httpOptions

body

stringify

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

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.