Angular HttpClient «Ошибка HTTP во время синтаксического анализа»

109

Я пытаюсь отправить запрос POST из Angular 4 на мой сервер 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 при разборе http://10.0.1.19/api/login

Если я верну пустой массив из своего бэкэнда, он сработает ... Значит, Angular пытается проанализировать мой ответ как JSON? Как я могу это отключить?

angular typescript angular-httpclient Nutzt
источник

Ответы:

238

Вы можете указать, что возвращаемые данные не используются в формате JSON responseType.

В вашем примере вы можете использовать responseTypeстроковое значение text, например:

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

Полный список опций responseType:

  • json (по умолчанию)
  • text
  • arraybuffer
  • blob

Дополнительную информацию см. В документации .

Кирк Ларкин
источник
17

если у вас есть варианты

return this.http.post(`${this.endpoint}/account/login`,payload, { ...options, responseType: 'text' })
Трун Куанг Хип
источник
3

Даже добавив responseType, я работал с ним несколько дней безуспешно. Наконец то я понял. Убедитесь, что в вашем внутреннем скрипте вы не определяете заголовок как - ("Content-Type: application / json);

Потому что, если вы превратите его в текст, но бэкэнд запросит json, он вернет ошибку ...

Шеми
источник
1
Также вы можете установить в качестве параметров новый объект, производный от нового класса. затем верните этот объект в качестве ответа. т.е. вы можете изменить свой ответ на формат JSON
whitefang
2

У меня была та же проблема, и причина заключалась в том, что во время возврата строки в вашем бэкэнде (пружине) вы могли возвращаться как возврат «используется пружина»; Но это не правильно разбирается по весне. Вместо этого используйте return "\" использованная пружина \ ""; -Pease out

AVI
источник
Из обзора: Привет, этот пост, похоже, не дает качественного ответа на вопрос. Пожалуйста, либо отредактируйте свой ответ и улучшите его, либо просто опубликуйте его как комментарий.
sɐunıɔ ןɐ qɐp
Хорошо .. ТАК например. в моей ситуации я использовал Spring в качестве бэкэнда и Angular во внешнем интерфейсе. После правильной аутентификации мой весенний сервер должен вернуть мне строку «действительна», которая обрабатывается только в том случае, если информация для входа верна.
AVI
Проблема с моей программой была аналогичной, т.е. Ошибка HTTP во время синтаксического анализа .... Затем я понял, что spring рассматривает "ответ моего сервера как специальный символ. Следовательно, мне пришлось вернуть строку, которую серверная часть также может понять ... Итак, я вернул" \ "действительный \" " вместо «действительный» и \ нотация в сети используется для указания «(кавычки), записанного внутри кавычек строки {" \ "\" "вместо" "" "}. И после этой ошибки нигде не было видно ... Надеюсь, теперь она более ясна @ sɐunıɔ ןɐ qɐp
AVI
1

Вы также должны проверить свой JSON (не в DevTools, а на бэкэнде). Angular HttpClient с трудом разбирает JSON с \0символами, а DevTools игнорирует его, поэтому его довольно сложно обнаружить в Chrome.

На основе этой статьи

Druss
источник
0

Я столкнулся с той же проблемой в моем приложении Angular. Я использовал REST API RocketChat в своем приложении, и я пытался использовать 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, к сожалению, я использовал более низкую версию.

Я предлагаю проверить, работает ли REST API нормально или нет, прежде чем тратить время на исправление ошибки в коде Angular. Я использовал 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.

Сибиш Вену
источник