Angular HttpClient“解析期间的Http失败”
我尝试从 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？我怎样才能禁用它？
您可以使用 responseType 指定要返回的数据是 not JSON。
在您的示例中，您可以使用 text 的 responseType 字符串值：
return this.http.post(
'http://10.0.1.19/login',
{email, password},
{responseType: 'text'})
responseType 的完整选项列表是：
json（默认）
文本
数组缓冲区
斑点
有关详细信息，请参阅 docs。
我只想补充一点，您必须在 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?: 布尔值 |不明确的; }'
如果你有选择
return this.http.post(`${this.endpoint}/account/login`,payload, { ...options, responseType: 'text' })
即使添加了 responseType，我也处理了好几天都没有成功。最后我得到了它。确保在您的后端脚本中，您没有将标头定义为 -("Content-Type: application/json);
因为如果你把它变成文本但后端要求 json，它会返回一个错误......
我遇到了同样的问题，原因是在后端（弹簧）中返回字符串时，您可能会返回“使用弹簧”；但这不是根据 spring 正确解析的。而是使用 return "\" spring used \""; - 和平相处
在我的情况下，问题是 url 调用中缺少“/”，就在资源之后。然后它试图获取角度组件 (html) 而不是 JSON 资源。我希望这会有所帮助，因为我没有在这个帖子中找到我的问题的答案。
您还应该检查 JSON（不是在 DevTools 中，而是在后端）。 Angular HttpClient 很难解析带有 \0 字符的 JSON，DevTools 将忽略它，因此在 Chrome 中很难发现。
基于 this article
我有同样的问题，但在我的情况下，我忘记将代理 url 添加到 api。
readonly apiUrl = this.appConfigService.appConfig.apiUrl + 'EndPointUrl';
这个答案帮助我弄清楚了：https://stackoverflow.com/a/66887643/12134299
就我而言，我在 PHP 结果中有一个换行符。
例如，
echo json_encode($row)."\<br/>";
我删除了 <br/>，一切都很好。
我在 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。
我将 .NetCore 用于我的后端任务，我能够通过使用 Newtonsoft.Json 库包从我的控制器返回一个 JSON 字符串来解决这个问题。
显然，并非所有 JSON 序列化程序都是按照正确的规范构建的。NET 5 的“return Ok("");”绝对不够。
return this.http.post<any>(this._addToUpvotersListURL, { responseType: 'text' });