Angular 4: Web API call mapping not working. ProgressEvent returned with error

Question

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

The conversion function in the map call is as follows.

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

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":"[email protected]","employeeId":"3123123","compnayAddressNumber":123123,"departmentAddressNumber":123123,"homeDepartmentAddressNumber":123123,"lineId":0,"phoneNumber":"123-456-7890","companyName":"My Corporation","homeDepartment":"Information Technology","managerName":"My Manager"}

For the 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;
    }
}

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

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

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

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

It's a <form> submit event handler. I have updated the question. — Arsalan
– Arsalan, Commented May 9, 2017 at 19:03
I think this might be a cors issue. stackoverflow.com/questions/39520209/… and solving: stackoverflow.com/questions/34790051/… — AVJT82
– AVJT82, Commented May 9, 2017 at 19:24
@AJT_82: It was a CORS issue. The extension resolved it. Please put your response as an answer. Thanks :) — Arsalan
– Arsalan, Commented May 9, 2017 at 19:45
Done! :) You are very welcome, glad to hear it got sorted out! :) — AVJT82
– AVJT82, Commented May 9, 2017 at 20:00

Community · Accepted Answer · 2017-05-23 12:02:40Z

7

The error

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

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

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.

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

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered May 9, 2017 at 19:59

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2340939 Over a year ago

This error should mention CORS, as it's not clear this is the reason...

Collectives™ on Stack Overflow

Angular 4: Web API call mapping not working. ProgressEvent returned with error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest