Angular HttpClient“解析期间的Http失败”答案

【问题标题】：Angular HttpClient "Http failure during parsing"Angular HttpClient“解析期间的Http失败”
【发布时间】：2018-03-06 14:52:27
【问题描述】：

我尝试从 Angular 4 向我的 Laravel 后端发送一个 POST 请求。

我的 LoginService 有这个方法：

login(email: string, password: string) {
    return this.http.post(`http://10.0.1.19/login`, { email, password })
}

我在我的 LoginComponent 中订阅了这个方法：

.subscribe(
    (response: any) => {
        console.log(response)
        location.reload()
    }, 
    (error: any) => {
        console.log(error)
    })

这是我的 Laravel 后端方法：

...

if($this->auth->attempt(['email' => $email, 'password' => $password], true)) {
  return response('Success', 200);
}

return response('Unauthorized', 401);

我的 Chrome 开发工具显示我的请求成功，状态码为 200。但是我的 Angular 代码触发了 error 块并给了我这个消息：

解析http://10.0.1.19/api/login时的Http失败

如果我从后端返回一个空数组，它可以工作......所以 Angular 试图将我的响应解析为 JSON？如何禁用此功能？

【问题讨论】：

标签： angular typescript angular-httpclient

【解决方案1】：

您可以使用responseType 指定要返回的数据是不是 JSON。

在您的示例中，您可以使用text 的responseType 字符串值，如下所示：

return this.http.post(
    'http://10.0.1.19/login',
    {email, password},
    {responseType: 'text'})

responseType 的完整选项列表是：

json（默认）
text
arraybuffer
blob

请参阅docs 了解更多信息。

【讨论】：

同样的解决方案对我不起作用。我不想提出一个新问题，因为我的问题几乎相同。这里有什么问题：return this.http.post<any>(this._addToUpvotersListURL, { responseType: 'text' });
@Tanzeel 请看我的回答：stackoverflow.com/a/69582514/1163423

【解决方案2】：

如果你有选择

return this.http.post(`${this.endpoint}/account/login`,payload, { ...options, responseType: 'text' })

【讨论】：

解释一下会很有帮助。 http.post 最多允许三个参数 - 如果我还需要添加标题怎么办？

【解决方案3】：

即使添加了 responseType，我也处理了好几天都没有成功。最后我明白了。确保在您的后端脚本中，您没有将标头定义为 -("Content-Type: application/json);

因为如果你把它转成文本，但后端要求 json，它会返回一个错误...

【讨论】：

您也可以将参数设置为从新类派生的新对象。然后将此对象作为响应返回。即您可以将响应更改为 JSON 格式

【解决方案4】：

我在 Angular 应用程序中遇到了同样的问题。我在我的应用程序中使用 RocketChat REST API，我试图使用rooms.createDiscussion，但出现如下错误。

ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK","url":"myurl/rocketchat/api/v1/rooms.createDiscussion","ok":false,"name":"HttpErrorResponse","message":"Http failure during parsing for myrul/rocketchat/api/v1/rooms.createDiscussion","error":{"error":{},"text":"

我尝试了几件事，比如更改responseType: 'text'，但都没有奏效。最后我发现问题出在我的 RocketChat 安装上。正如RocketChat change log 中提到的，API rooms.createDiscussion 是在 1.0.0 版本中引入的，不幸的是我使用的是较低版本。

我的建议是在花时间修复 Angular 代码中的错误之前检查 REST API 是否正常工作。我使用curl 命令来检查。

curl -H "X-Auth-Token: token" -H "X-User-Id: userid" -H "Content-Type: application/json" myurl/rocketchat/api/v1/rooms.createDiscussion -d '{ "prid": "GENERAL", "t_name": "Discussion Name"}'

我也收到了无效的 HTML 作为响应。

<!DOCTYPE html>
<html>
<head>
<meta name="referrer" content="origin-when-crossorigin">
<script>/* eslint-disable */

'use strict';
(function() {
        var debounce = function debounce(func, wait, immediate) {

而不是如下的有效 JSON 响应。

{
    "discussion": {
        "rid": "cgk88DHLHexwMaFWh",
        "name": "WJNEAM7W45wRYitHo",
        "fname": "Discussion Name",
        "t": "p",
        "msgs": 0,
        "usersCount": 0,
        "u": {
            "_id": "rocketchat.internal.admin.test",
            "username": "rocketchat.internal.admin.test"
        },
        "topic": "general",
        "prid": "GENERAL",
        "ts": "2019-04-03T01:35:32.271Z",
        "ro": false,
        "sysMes": true,
        "default": false,
        "_updatedAt": "2019-04-03T01:35:32.280Z",
        "_id": "cgk88DHLHexwMaFWh"
    },
    "success": true
}

所以在更新到最新的 RocketChat 之后，我就可以使用上面提到的 REST API。

【讨论】：

【解决方案5】：

您还应该检查 JSON（不是在 DevTools 中，而是在后端）。 Angular HttpClient 很难解析带有 \0 字符的 JSON，DevTools 会忽略，所以在 Chrome 中很难发现。

基于this article

【讨论】：

【解决方案6】：

我遇到了同样的问题，原因是在后端（弹簧）中返回字符串时，您可能会返回返回“使用过的弹簧”；但这不是根据 spring 正确解析的。而是使用 return "\" spring used \""; - 和平

【讨论】：

点评来源：嗨，这篇文章似乎没有为问题提供quality answer。请编辑您的答案并改进它，或者将其作为评论发布。
好吧..例如。在我的情况下，我使用 Spring 作为后端，在前端使用 Angular。在正确的身份验证后，我的 spring 服务器必须返回一个字符串“valid”，只有在登录信息正确时才会处理。
我的程序的问题是类似的，即。解析期间的 Http 失败....然后我意识到 Spring 正在考虑将“我的服务器响应作为特殊字符”。因此，我必须返回一个后端也可以理解的字符串...所以我返回了“\”有效\“”而不是“valid”，web 中的 \ 表示法用于指定写在字符串 {“\”\“”而不是“”“”} 的反逗号内的“（反逗号）。在那个错误无处可见之后..我希望现在更清楚@sɐunıɔןɐqɐp
感谢您的回答。这对我来说也很好。

【解决方案7】：

我将 .NetCore 用于我的后端任务，我能够通过使用 Newtonsoft.Json 库包从我的控制器返回 JSON 字符串来解决此问题。

显然，并非所有 JSON 序列化程序都是按照正确的规范构建的。NET 5 的“return Ok("");”绝对不够。

【讨论】：

【解决方案8】：

在我的情况下，问题是 url 调用中缺少“/”，就在资源之后。然后它试图获取角度组件 (html) 而不是 JSON 资源。我希望这会有所帮助，因为我没有在这个帖子中找到我的问题的答案。

【讨论】：

这个答案提示了我的问题，谢谢这里是我的答案的链接：stackoverflow.com/a/69751345/12134299

【解决方案9】：

我只想补充一点，您必须在 get/post 方法 (.get<T>) 上省略通用参数。

✔️ 这会起作用：

this.http.get(`https://myapi.com/health`, {responseType: 'text'})

❌这将不工作：

this.http.get<string>(`https://myapi.com/health`, {responseType: 'text'})

后面会产生错误：

预期类型来自声明的属性“responseType” 在这里输入'{ headers?: HttpHeaders | { [标题：字符串]：字符串 | 细绳[]; } |不明确的;观察：“事件”；上下文？： HttpContext | 不明确的;参数？： HttpParams | { ...; } |不明确的; 报告进度？：布尔值 |不明确的;响应类型？：“json”| 不明确的; withCredentials?: 布尔值 |不明确的; }'

【讨论】：

【解决方案10】：

我遇到了同样的问题，但在我的情况下，我忘记将代理 url 添加到 api。

readonly apiUrl = this.appConfigService.appConfig.apiUrl + 'EndPointUrl';

这个答案帮我弄清楚了：https://stackoverflow.com/a/66887643/12134299

【讨论】：