Http调用立即取消

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

起初我以为这是一个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.所以我知道它在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) 
    ); 
};

来源

2017-08-10 jrquick

默认情况下，角度http observables是冷的。这意味着您的登录功能只需设置http请求。要真正发起http请求，你必须订阅observable this.login.subscribe（）; – LLai

[Angular 2 http get not get]的可能重复（https://stackoverflow.com/questions/41381200/angular-2-http-get-not-getting） – Alex

这个问题是_slightly_不同，正在进行调用网络和取消。我的问题似乎是没有正确设置订阅方法。另一个问题是完全错过了根本不会导致任何呼叫的订阅方法。尽管如此，它帮助我走上了正轨，谢谢！ – jrquick

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

来源

2017-09-29 14:41:06 jrquick

我不知道为什么你映射了两次。

只是为了比较...这是我的帖子看起来像（见下文）。它发布一个保存，但语法应该是一样的登录。

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

请注意，这是订阅揭开序幕的观察到的，执行岗位。

来源

2017-08-11 00:15:59 DeborahK

当我尝试获取'属性'确实'不存在'Observable''类型 – jrquick

您可以将其删除（仅用于调试），也可以导入do操作符。 'import'rxjs/add/operator/do';' – DeborahK

我已经包含了我的调用'subscribe'的组件。我试图删除第二个'地图'调用，也没有运气。 – jrquick

Http调用立即取消

回答

相关问题