角度4:Web API调用映射不起作用.ProgressEvent返回错误 [英] Angular 4: Web API call mapping not working. ProgressEvent returned with error

问题描述

我正在尝试使用这样的代码调用网络API端点.

I am trying to call a web api end point using code like this.

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调用中的转换函数如下.

The conversion function in the map call is as follows.

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

使用提琴手，我得到以下RAW响应.

Using fiddler I get the following RAW response.

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":"[e-mail]","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.

The function convertResponseToUserSession never gets called, only handleError is called.

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

其中错误是一个Response对象，并且erorr.toString()返回"‌状态为0的响应:URL:null"，而error.json()返回ProgressEvent

where error is a Response object and erorr.toString() return "‌Response with status: 0 for URL: null" and error.json() returns ProgressEvent

正在从提交事件处理程序中调用功能verifyUserLogin，如下所示.

The function verifyUserLogin is being called from a submit event handler as follows.

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.`);
    });
}

推荐答案

错误

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

将指向CORS问题，如此处所述:

would point to a CORS issue, as per said here: Angular 2: EXCEPTION: Response with status: 0 for URL: null

需要在服务器端启用CORS，并且在某些情况下(在开发过程中)还需要在浏览器本身中启用cors.可以通过此处此处的chrome扩展轻松完成此操作.strong> .

CORS needs to be enabled on server side, and in some cases also enabling cors in the browser itself (during development). This can easily be done with chrome extension available here.

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

And if you are using Firefox, you can use the plugin for FireFox: cross-domain plugin

这篇关于角度4:Web API调用映射不起作用.ProgressEvent返回错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！