Question

我尝试将Angular 4的POST请求发送到我的Laravel后端。

我的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？我怎样才能禁用它？

Answer 1

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

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

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

其他选项包括json（默认），arraybuffer和blob。

有关详细信息，请参阅docs。

Answer 2

如果你有选项

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

Answer 3

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

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

Answer 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。

Answer 5

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

基于this article

Answer 6

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

Answer 7

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

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

Answer 8

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

Angular HttpClient“解析过程中的Http失败”

8 个答案: