Angular 4 : Web API call mapping not working. 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);
}

map调用中的转换函数如下。

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"}

为了类(class)

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() 返回“‌Response with status: 0 for 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: Response with status: 0 for URL: null

需要在服务器端启用 CORS，并且在某些情况下还需要在浏览器本身中启用 cors(在开发期间)。这可以通过可用的 chrome 扩展轻松完成 here .

如果您使用的是 Firefox，则可以使用 FireFox 的插件:cross-domain plugin