Http 调用立即取消

Question

我有一个 angular 4 前端和一个 CakePHP 3 后端。当我使用浏览器或 Rest Client 向 API 端点发出请求时，我收到了响应。但是当我从 angular 服务发送响应时，它立即显示在网络中已取消。

起初我以为是 CORS 问题。我尝试过启用和不启用 CORS。我还在我的 AppController.php 中添加了 $this->Security->csrfCheck = false; 这让我相信本地服务器永远不会被击中（没有触发断点）。

所以我正在看等式的 Angular 边。我试图设置我的 headers，但这也不起作用。

import { Headers, Http, Response, RequestOptions } from '@angular/http';

login(loginData) {
    const headers = new Headers({'Content-Type': 'application/json'});

    const url:string = this.backendUrl + '/auth/login/?';

    return this.Http.post(
        url,
        JSON.stringify(loginData),
        { headers: headers }
    ).map(
        res => res.json
    ).map(
        response => function(response) {
            ...
        },
        error => function(error) {
            ...
        }
    );
}

我正在从 1 迁移到 4。所以我知道它在 Angular 1 中使用 $http 请求工作。

function login(loginData) {
   var = this.backendUrl + '/auth/login/?';

   $http.post(url, loginData).then( ... );
}

这是我使用订阅的组件：

login = function(activeUser):ActiveUser|boolean {
    this.isLoggingIn = true;

    return this.LoginService.login(activeUser).subscribe(
        activeUser => function(activeUser) {
            if (activeUser) {
                this.activeUser = activeUser;
            } else {
                this.reset();
            }

            return activeUser;
        }.bind(this)
    ).complete(
        function() {
            this.isLoggingIn = false;
        }.bind(this)
    );
};

Answer 1

我不确定你为什么映射两次。

只是为了比较...这就是我的 post 的样子（见下文）。它正在 post 保存，但登录的语法应该相同。

   saveProduct(product: IProduct): Observable<IProduct> {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this.http.post(this.baseUrl, product, options)
            .map(this.extractData)
            .do(data => console.log('createProduct: ' + JSON.stringify(data)))
            .catch(this.handleError);
    }

    private extractData(response: Response) {
        let body = response.json();
        return body.data || {};
    }

    private handleError(error: Response): Observable<any> {
        // in a real world app, we may send the server to some remote logging infrastructure
        // instead of just logging it to the console
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }

您如何调用此服务？

我的组件代码如下所示：

        this.productService.saveProduct(this.product)
            .subscribe(
                () => this.onSaveComplete(`${this.product.productName} was saved`),
                (error: any) => this.errorMessage = <any>error
            );

请注意，启动 Observable 并执行 post 的是订阅。

Answer 2

问题与 Angular $http 现在处理 CORS 请求的方式有关。在更新版本中，发送了两个请求，一个是 OPTIONS 请求，然后是实际的 GET/POST 请求。所以我不得不在不执行命令的情况下将我的后端更改为 return OPTIONS 上的 200，而是在第二个请求上执行。

Http 调用立即取消

Http calls are immediately cancelled

cors

cakephp-3.0

angular