Question

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

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

所以相反，我正在研究等式的角度方面。我试图设置我的标题，但这也不起作用。

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.因此我知道它使用$ http请求在Angular 1中有效。

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

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

仅供比较......这就是我的帖子的样子（见下文）。它发布了一个保存，但登录的语法应该相同。

   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并执行帖子。

Answer 2

问题与Angular $ http现在如何处理CORS请求有关。在更新版本中，发送了两个请求，一个OPTIONS请求，然后是实际的GET / POST请求。因此，我必须更改后端以在OPTIONS上返回200而不执行命令，而是在第二个请求上执行。

Http电话立即被取消

2 个答案: