获取JWT令牌的Angular http POST返回200ok，解析错误[重复]

Question

这个问题在这里已有答案：

• Angular HttpClient “Http failure during parsing” 4个答案

我一直试图通过我的网络应用程序从我的网络API收到一个JWT令牌。我能够成功检索JWT令牌字符串，但我收到的解析错误似乎无法解决。

这是我通过POST将正确的凭据发送到我的web api端点后的响应：

对象{headers：{...}，状态：200，statusText：“OK”，url：“http://localhost:52706/api/auth/token”，ok：false，名称：“HttpErrorResponse”，消息：“解析http://localhost:52706/api/auth/token时出现Http失败”，错误：{...} }

正如您所看到的，当我扩展错误时，我得到一个200ok响应并且令牌实际上在控制台中：

错误：{...} 错误：SyntaxError：“JSON.parse：JSON数据第1行第1列的意外字符” onLoadhttp：//本地主机：4200 / vendor.js：28768：46invokeTaskhttp：//本地主机：4200 文字： “eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiQ29keVdpbHNvbiIsIlVzZXJSb2xlIjoiQWRtaW4iLCJPcmdJRCI6.dIOAIODWIOJDJjwiadjoiawjdjoiAOIJWDijoawdji838DHWJHio”

这是我的Angular登录功能：

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

这是我的登录组件打字稿：

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

谢谢。

Answer 1

要防止Angular尝试将您的令牌解析为JSON，您需要设置responseType: 'text'。

试试这个：

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

Answer 2

您是获取JSON对象还是仅将JWT作为字符串？如果您将JWT作为字符串获取，那么JSON解析将失败，因为响应中没有JSON。

将responseType: 'text'添加到httpOptions以处理返回字符串。

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