Question

我正在编写一个Angular 2应用程序，它在localhost上调用PHP api。 login.component.html 中的HTML如下所示：

<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确实有效并成功返回响应。这在某种程度上有效，我最近更新了chrome，这可能与它有关。我也确定这不是一个CORS问题，因为它在更新之前确实在chrome中工作，并且也适用于Mozilla。以下是Chrome响应：

最后取消的请求标头：

想法？

Answer 1

我最初的猜测是，您需要将type="button"属性/值添加到按钮标记中。 Chrome中按钮标记的默认行为是提交表单，该表单正在取消您的请求（当浏览器将表单发回给自身时）。

例如：

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

MDN Documentation

引自W3Schools：

提示：始终指定<button>元素的type属性。不同的浏览器为<button>使用不同的默认类型元件。

Chrome取消了Angular 2请求

1 个答案: