Chrome anuluje żądanie Angular 2 - google-chrome, kątowe

Piszę aplikację Angular 2, która wywołuje interfejs API PHP na localhost. HTML w login.component.html następująco:

<form name="loginForm" class="loginForm">

<input type="text" name="email" id="email" placeholder="Email" [(ngModel)]="model.email" size="65">

<input type="password" name="password" id="password" placeholder="Password" [(ngModel)]="model.password" class="input" size="20">

<button tabindex="12" class="btn-full submit" (click)="attemptLogin()">Log In</button>
</form>

Następnie login.component.ts ma funkcję seekLogin ():

attemptLogin(){
this.identityService.attemptLogin(this.model).subscribe(
result => {
if(result.isauthenticated){
console.log("Successful Auth");
}else {
console.log("Failed Auth");
}
},
err => {
console.log(err);
});
}

A potem w identityService.ts Mam:

attemptLogin(credentials: Credentials): Observable<Authorization> {

let headers = new Headers({ "Content-Type": "application/json" });
let options = new RequestOptions({ headers: headers });

let bodyString = JSON.stringify(credentials);


return this.http.post("http://localhost:8000/login", bodyString, options)
.map((res:Response) => res.json())
.catch((error:any) => Observable.throw(error.json().error || "Server error"))
}

Upewniłem się, że php backend działa izwracanie prawidłowej odpowiedzi. Mój problem polega na tym, że chrome anuluje żądanie, IE to samo, ale firefox działa i pomyślnie zwraca odpowiedź. W pewnym momencie to zadziałało, ostatnio zaktualizowałem chrome, co może mieć z tym coś wspólnego. Upewniłem się również, że nie jest to problem CORS, ponieważ naprawdę działał w chrome przed aktualizacją, a także działa dobrze z Mozillą. Oto odpowiedź Chrome:

I na koniec nagłówek anulowanego żądania:

myśli?

Odpowiedzi:

Domyślam się, że musisz dodać type="button" atrybut / wartość do znacznika przycisku. Domyślnym zachowaniem tagu przycisku w Chrome jest przesłanie formularza, który anuluje Twoje żądanie (gdy przeglądarka wysyła formularz z powrotem do siebie).

Na przykład:

<!-- Added button "type" attribute/value -->
<button type="button" tabindex="12"...

Dokumentacja MDN

Cytowane z W3Schools:

Wskazówka: Zawsze określaj atrybut typu dla <button> element. Różne przeglądarki używają różnych typów domyślnych dla <button> element.