Angular http POST 获取 JWT 令牌返回 200ok，并带有解析错误

Question

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

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

对象 { headers： {...}， status： 200， statusText： "OK"， url： "http://localhost:52706/api/auth/token"， ok： false， name： ">

HttpErrorResponse"， message： "Http failure in parsening for http://localhost:52706/api/auth/token"， error： {...} }

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

错误： {...}错误：
语法错误："JSON.parse：JSON 数据第 1 行第 1 列的意外字符">
onLoadhttp://localhost:4200/vendor.js:28768:46invokeTaskhttp://localhost: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);