Angular 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 || { };
}

使用fiddler我得到以下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.

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

其中error是一个Response对象,而erorr.toString()返回"响应状态:0表示URL:null",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:响应状态:0表示URL:null

需要在服务器端启用CORS,在某些情况下还需要在浏览器中启用cors(在开发期间).这可以通过这里提供的chrome扩展轻松完成.

如果您使用的是Firefox,则可以使用FireFox插件:跨域插件