5

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

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.`);
    });
}
Arsalan
  • 151
  • 1
  • 2
  • 11
  • Where do you use `verifyUserLogin`? – eko May 09 '17 at 18:44
  • It's a
    submit event handler. I have updated the question.
     – Arsalan May 09 '17 at 19:03
  • 1
    I think this might be a cors issue. http://stackoverflow.com/questions/39520209/angular-2-exception-response-with-status-0-for-url-null and solving: http://stackoverflow.com/questions/34790051/how-to-create-cross-domain-request-angular-2 – AT82 May 09 '17 at 19:24
  • @AJT_82: It was a CORS issue. The extension resolved it. Please put your response as an answer. Thanks :) – Arsalan May 09 '17 at 19:45
  • Done! :) You are very welcome, glad to hear it got sorted out! :) – AT82 May 09 '17 at 20:00

1 Answers1

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

Community
  • 1
  • 1
AT82
  • 71,416
  • 24
  • 140
  • 167