171

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

4

10 回答 10

361

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

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

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

选项的完整列表responseType是：

  • json（默认）
  • text
  • arraybuffer
  • blob

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

于 2017-09-25T15:12:58.593 回答
25

如果你有选择

return this.http.post(`${this.endpoint}/account/login`,payload, { ...options, responseType: 'text' })
于 2018-02-02T10:12:41.030 回答
14

我只想补充一点，您必须省略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?: 布尔值 | 不明确的; }'

于 2021-10-15T09:20:04.660 回答
7

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

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

于 2019-03-28T07:22:00.767 回答
3

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

于 2019-11-16T14:59:50.373 回答
2

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

于 2021-03-31T12:11:17.307 回答
1

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

基于这篇文章

于 2019-08-06T16:36:54.023 回答
1

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

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

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

于 2021-10-28T09:15:34.683 回答
0

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

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

于 2020-12-29T06:28:59.590 回答
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 更改日志中提到的，APIrooms.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。

于 2019-05-13T06:05:06.953 回答