Angular http POST to get JWT token returns 200ok with parsing error

Question

I have been trying to receive a JWT token from my web api through my angular web app. I am able to successfully retrieve the JWT token string, but I am receiving a parsing error that I cannot seem to fix.

This is the response after I send the correct credentials via POST to my web api endpoint:

Object { headers: {…}, status: 200, statusText: "OK", url: "http://localhost:52706/api/auth/token", ok: false, name: "HttpErrorResponse", message: "Http failure during parsing for http://localhost:52706/api/auth/token", error: {…} }

As you can see, I am getting a 200ok response and the token is actually in the console when I expand the error:

error: {…}
error: SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"
onLoadhttp://localhost:4200/vendor.js:28768:46invokeTaskhttp://localhost:4200
text: "eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiQ29keVdpbHNvbiIsIlVzZXJSb2xlIjoiQWRtaW4iLCJPcmdJRCI6.dIOAIODWIOJDJjwiadjoiawjdjoiAOIJWDijoawdji838DHWJHio"

Here is my Angular login funtion:

loginUser(user) {
const creds = user.username + ":" + user.password;

const httpOptions = {
  headers: new HttpHeaders({
    "Content-Type": "application/json",
    Authorization: "Basic" + btoa(creds)
  })
};

return this.http.post<any>(this._loginUrl, user, httpOptions);
}

Here is my login-component typescript:

loginUser() {
//console.log(this.loginUserData);
this._authentication
  .loginUser(this.loginUserData)
  .subscribe(res => console.log(res), err => console.log(err));
}

Thank you.

I decoded the returned token - it looks like a deformed JWT. The brackets are messed up. — barrypicker, Sep 18 '18 at 20:14
Sorry, I should have specified that the Firefox console was cutting off the full response token, so I made up a fake token for this post. The real token works just fine if I were to throw it into Postman. The correct token is now in the post. — CAlex, Sep 18 '18 at 20:18
Authorization: "Basic" missing space ? it should be "Basic " — willmaz, Sep 18 '18 at 20:18
Have a look at the duplicate - Angular's `HttpClient` attempts to parse JSON by default, but this *isn't* JSON and so it fails. — Kirk Larkin, Sep 18 '18 at 20:22
@KirkLarkin I had looked at that post and tried adding the response-type as text. I received the same error. — CAlex, Sep 18 '18 at 20:27
Double-check that you set `{ responseType: 'text' }` inside of `httpOptions` and not inside of `headers`. — Kirk Larkin, Sep 18 '18 at 20:28
@CAlex I'm unable to add ```{ responseType: 'text' }``` inside of httpOptions. its showing an error. how did you do — Sravan Kumar, Apr 21 '20 at 15:49

Todd Skelton · Answer 1 · 2018-09-18T20:46:01.070

1

Are you getting a JSON object back or just the JWT as a string? If you are getting the JWT as a string then JSON parse will fail because there is no JSON in the response.

Add responseType: 'text' to your httpOptions to handle a return string.

loginUser(user) {
const creds = user.username + ":" + user.password;

const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type': 'application/json',
        Authorization: 'Basic' + btoa(creds)
    }),
    responseType: 'text'
};

return this.http.post(this._loginUrl, user, httpOptions);

edited Sep 18 '18 at 20:46

answered Sep 18 '18 at 20:18

Todd Skelton

6,839
3
36
48

I am getting the token back as a string. – CAlex Sep 18 '18 at 20:26

Uğur Dinç · Answer 2 · 2018-09-18T20:30:45.927

To prevent Angular trying to parse your token as a JSON, you need to set responseType: 'text'.

Try this:

loginUser(user) {
    const creds = user.username + ":" + user.password;

    const headers = new HttpHeaders({
            "Content-Type": "application/json",
            Authorization: "Basic" + btoa(creds)
    });

    return this.http.post<any>(this._loginUrl, user, {
        headers: headers,
        responseType: 'text'
    });
}

Angular http POST to get JWT token returns 200ok with parsing error

2 Answers2