角4：Web API呼び出しマッピングが機能しません。エラーで返されたProgressEvent

Question

このようなコードを使用してWeb APIのエンドポイントを呼び出そうとしています。

verifyUserLogin(userName: string, password: string): Observable<UserSession> 
{ 
    let observable = this._http.get(this.baseUrl + "?userName=" + encodeURIComponent(userName) + "&password=" + encodeURIComponent(password)); 
    return observable 
     .map(this.convertResponseToUserSession) 
     .do(data => this.logData(data)) 
     .catch(this.handleError); 
} 

マップコールの変換機能は次のとおりです。

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

私は次のRAW応答を取得します。

HTTP/1.1 200 OK 
Cache-Control: no-cache 
Pragma: no-cache 
Content-Type: application/json; charset=utf-8 
Expires: -1 
Server: Microsoft-IIS/10.0 
X-AspNet-Version: 4.0.30319 
X-SourceFiles: =?UTF-8?B?RDpcUHJvamVjdHNcU05DQ2xpZW50c1xTTkNDbGllbnRzXGFwaVxVc2Vy?= 
X-Powered-By: ASP.NET 
Date: Tue, 09 May 2017 17:49:52 GMT 
Content-Length: 465 
{"id":"c384bf34-6bbc-45a9-944f-6d2d4f7874af","lastAccess":"2017-05-09T14:18:39.7111621-04:00","userId":"arsalan","displayName":"Arsalan","emailAddress":"Arsalan@mycompany.com","employeeId":"3123123","compnayAddressNumber":123123,"departmentAddressNumber":123123,"homeDepartmentAddressNumber":123123,"lineId":0,"phoneNumber":"123-456-7890","companyName":"My Corporation","homeDepartment":"Information Technology","managerName":"My Manager"} 

クラスについては

export class UserSession { 
    public Id: string; 
    public lastAccess: Date; 
    public userId: string; 
    public displayName: string; 
    public emailAddress: string; 
    public employeeId: string; 
    public compnayAddressNumber: number; 
    public departmentAddressNumber: number; 
    public homeDepartmentAddressNumber: number; 
    public lineId: number; 
    public phoneNumber: string; 
    public companyName: string; 
    public homeDepartment: string; 
    public managerName: string; 

    isSessionValid() : boolean 
    { 
     if(this.Id && this.Id.length === 36) 
     { 
      return true; 
     } 

     return false; 
    } 
} 

機能convertResponseToUserSessionが呼ばれることは決してありません、唯一のhandleErrorのが呼び出されます。

エラー応答オブジェクトであり、erorr.toString（）戻り "状態と応答：URL 0：NULL"

private handleError(error: any) 
{  
    ... 
} 

とerror.jsonは（）によってProgressEvent

にverifyUserLoginから呼び出されている関数を返します次のようにイベントハンドラを送信します。

loginUserClicked(): void 
{ 
    this.formWaiting = true; 
    this._userService.verifyUserLogin(this.userName, this.password) 
     .subscribe((userSession: UserSession) => 
    { 
     if (!userSession) 
     { 
      alert(`Username or password is incorrect.`); 
      return; 
     } 
     this.userAuthenticated.emit(userSession); 
    }, (error) => 
    { 
     this.errorMessage = <any> error; 
     alert(`There was an error trying to log you in. Please contact support.`); 
    }); 
} 

Answer 1

ここに述べた通り

"‌Response with status: 0 for URL: null" 

は、CORSの問題を指しますエラー：Angular 2: EXCEPTION: Response with status: 0 for URL: null

CORSがサーバー側で有効にする必要があり、いくつかのケースでもでCORSを有効にしますブラウザ自体（開発中）これは、クロム延長が利用可能なhereで簡単に行うことができます。

そして、あなたは、Firefoxを使用している場合は、Firefox用のプラグインを使用することができます：あなたは `verifyUserLogin`を使用しないcross-domain plugin