Кутовий HttpClient "Невдача Http під час розбору"

106

Я намагаюся надіслати POST-запит з кутового 4 на мій сервер Laravel.

У моїй службі входу є такий спосіб:

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 кодом статусу. Але мій кутовий код спрацьовуєerror блок і передає мені це повідомлення:

Невдача HTTP під час розбору для http://10.0.1.19/api/login

Якщо я поверну порожній масив зі свого бекенда, він працює ... Тож Angular намагається проаналізувати мою відповідь як JSON? Як я можу відключити це?

angular typescript angular-httpclient

— горіх
джерело

233

Ви можете вказати, що дані, що повертаються, не використовуються 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' })

— Trần Quang Hiệp
джерело

3

Навіть додаючи responseType, я працював з ним протягом днів, не маючи успіху. Нарешті я це отримав. Переконайтесь, що у своєму скрипті заходу ви не визначаєте заголовок як - ("Content-Type: application / json);

Тому що якщо ви перетворите його на текст, але бекенд просить json, він поверне помилку ...

— Шемі
джерело

Також ви можете встановити в якості параметрів новий об'єкт, отриманий з нового класу. потім поверніть цей об’єкт як відповідь. тобто ви можете змінити свою відповідь на формат JSON

— whitefang

1

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

На основі цієї статті

— друз
джерело

1

У мене була така ж проблема, і причина полягала в тому, що під час повернення рядка у вашому бекенді (весна) ви можете повертатися як повернення "використана пружина"; Але це не розбирається правильно відповідно до весни. Замість цього використовуйте return "\" використана пружина \ ""; -Бувай

— AVI
джерело

З перегляду: Привіт, ця публікація, здається, не дає якісної відповіді на питання. Будь ласка, відредагуйте свою відповідь та вдосконаліть її, або просто опублікуйте її як коментар.

— sɐunıɔ ןɐ qɐp

Добре..Що наприклад. у моїй ситуації я використовував Spring як резервний та Angular на передньому краї. Після правильної автентифікації мій сервер Spring повинен повернути мені рядок "дійсний", який обробляється, лише якщо інформація про вхід правильна.

— AVI

Проблема з моєю програмою була подібною, тобто. Невдача Http під час розбору .... Тоді я зрозумів, що весна розглядає "мою відповідь сервера як особливий характер. Отже, мені довелося повернути рядок, який також може зрозуміти бекенд ... Отже, я повернув" \ "дійсний \" " замість "дійсного" і \ notation у веб використовується для вказівки "(перевернутої коми), написаної всередині перевернутих коми рядка {" \ "\" "замість" "" "}. І після цієї помилки ніде не було помічено .. Сподіваюсь, її тепер зрозуміліше @ 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, на жаль, я використовував нижчу версію.

Моя пропозиція - переконатися, що API REST працює нормально чи ні, перш ніж витратити час на виправлення помилки у вашому кутовому коді. Я використовував 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.

— Сібеш Вену
джерело