鉻取消角2請求

我正在寫一個Angular 2應用程序調用本地主機上的PHP API。該HTML在login.component.html如下：鉻取消角2請求

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

然後login.component.ts具有attemptLogin（）函數：

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

然後在identityService。 ts我有：

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

我確定後端php正在工作並返回有效的響應。我的問題是Chrome取消了請求，IE相同，但firefox確實工作併成功返回響應。這個工作在某些時候，我最近更新了鉻，這可能與它有關。我也確定這不是一個CORS問題，因爲它在更新之前確實在chrome中工作，並且在Mozilla中也可以正常工作。這裏是Chrome響應：

最後被取消的請求頭：

想法？

來源

2016-12-28 MAK2020

我最初的猜測是，您需要將type="button"屬性/值添加到您的按鈕標籤。 Chrome中按鈕標記的默認行爲是提交表單，該表單取消了您的請求（當瀏覽器將表單發回自己時）。

例如：

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

MDN Documentation

從W3Schools引用：

提示：始終指定一個<button>元素的類型的屬性。不同的瀏覽器對於<button> 元素使用不同的默認類型。

來源

2016-12-29 04:14:04

它的工作！我不能相信它，但它確實:)謝謝史蒂夫 – MAK2020

沒問題。很高興我能幫上忙！ –

鉻取消角2請求

回答

相關問題