Angular HttpClient“解析期间Http失败”

106

我尝试从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

— 坚果
source

232

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

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

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

选项的完整列表responseType为：

json （默认）
text
arraybuffer
blob

有关更多信息，请参阅文档。

— 柯克·拉金（Kirk Larkin）
source

17

如果您有选择

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

— TrầnQuangHiệp
source

3

即使添加responseType，我也已经处理了好几天没有成功。最后我明白了。确保在后端脚本中没有将标头定义为-（“ Content-Type：application / json）;

因为如果将其转换为文本，但后端要求提供json，则会返回错误...

— 舍米
source

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

— whitefang

1

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

根据本文

— 德鲁斯
source

1

我有同样的问题，原因是在后端（spring）中返回字符串时，您可能会返回“ spring used”。但这并没有根据spring进行解析。而是使用return “ \” spring used \“”; -和平

— AVI
source

点评来源：您好，这篇文章似乎并没有为问题提供高质量的答案。请编辑您的答案并加以改进，或者只是将其发布为评论。

— sɐunıɔןɐqɐp

好..SO例如在我的情况下，我使用Spring作为后端，而使用Angular作为前端。经过正确的身份验证后，spring服务器必须向我返回一个字符串“ valid”，仅当登录信息正确时才进行处理。

— AVI

我程序的问题是类似的。解析过程中出现Http错误。...然后我意识到spring正在考虑将服务器响应作为特殊字符。因此，我必须返回一个字符串，后端也可以理解...所以我返回了“ \”有效\“”在Web中，“ \”符号用来表示写在字符串{“ \” \“”而不是“”“”}的反逗号内的“（反逗号）”。在此错误之后无处可寻..我希望它现在更清楚@sɐunıɔןɐqɐp–

— AVI

0

我在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更改日志中所述，该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。

— 西贝什·维努（Sibeesh Venu）
source