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

【问题标题】：Angular http POST to get JWT token returns 200ok with parsing error [duplicate]获取 JWT 令牌的 Angular http POST 返回 200ok 并解析错误 [重复]
【发布时间】：2019-02-22 22:12:28
【问题描述】：

我一直在尝试通过我的 Angular Web 应用从我的 Web api 接收 JWT 令牌。我能够成功检索 JWT 令牌字符串，但收到一个似乎无法修复的解析错误。

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

Object { headers: {…}, status: 200, statusText: "OK", url: "http://localhost:52706/api/auth/token", ok: false, name: "HttpErrorResponse", message: "http://localhost:52706/api/auth/token 解析过程中的 Http 失败"，错误：{…} }

如您所见，当我展开错误时，我得到了 200ok 响应，并且令牌实际上在控制台中：

错误：{…}
错误：SyntaxError：“JSON.parse：JSON 数据的第 1 行第 1 列出现意外字符”
onLoadhttp://localhost:4200/vendor.js:28768:46invokeTaskhttp://localhost:4200
文字： “eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiQ29keVdpbHNvbiIsIlVzZXJSb2xlIjoiQWRtaW4iLCJPcmdJRCI6.dIOAIODWIOJDJjwiadjoiawjdjoiAOIJWDijoawdji838DHWJHio” P>

这是我的 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));
}

谢谢。

【问题讨论】：

我解码了返回的令牌——它看起来像一个变形的 JWT。括号搞砸了。
对不起，我应该指定 Firefox 控制台正在切断完整的响应令牌，所以我为这篇文章编了一个假令牌。如果我将它扔给 Postman，真正的令牌就可以正常工作。正确的令牌现在在帖子中。
看看重复的 - Angular 的 HttpClient 默认尝试解析 JSON，但这不是 JSON，所以它失败了。
再次检查您是否将{ responseType: 'text' } 设置在httpOptions 内部而不是headers 内部。
@KirkLarkin 就是这样！

标签： angular typescript jwt angular-httpclient

【解决方案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'
    });
}

【讨论】：

【解决方案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);

【讨论】：

我将令牌作为字符串取回。