Angular HttpClient“解析期间的Http失败”
Posted
技术标签:
【中文标题】Angular HttpClient“解析期间的Http失败”【英文标题】：Angular HttpClient "Http failure during parsing" 【发布时间】：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？如何禁用此功能？
【问题讨论】：
【参考方案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 请看我的回答：***.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 资源。我希望这会有所帮助，因为我没有在这个帖子中找到我的问题的答案。
【讨论】：
这个答案提示了我的问题，谢谢这里是我的答案的链接：***.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://***.com/a/66887643/12134299
【讨论】：
以上是关于Angular HttpClient“解析期间的Http失败”的主要内容，如果未能解决你的问题，请参考以下文章
Angular 6 - 从 httpClient 获取 csv 响应
Angular 4.3.3 HttpClient：如何从响应的标头中获取值？
Angular：无法使用 HttpClient 获取本地 json