Angular HttpClient “Kegagalan Http selama penguraian”

107

Saya mencoba mengirim permintaan POST dari Angular 4 ke backend Laravel saya.

My LoginService memiliki metode ini:

login(email: string, password: string) {
    return this.http.post(`http://10.0.1.19/login`, { email, password })
}

Saya berlangganan metode ini di LoginComponent saya:

.subscribe(
    (response: any) => {
        console.log(response)
        location.reload()
    }, 
    (error: any) => {
        console.log(error)
    })

Dan ini adalah metode backend Laravel saya:

...

if($this->auth->attempt(['email' => $email, 'password' => $password], true)) {
  return response('Success', 200);
}

return response('Unauthorized', 401);

Alat pengembang Chrome saya mengatakan bahwa permintaan saya berhasil dengan 200 kode status. Tetapi kode Angular saya memicu errorpemblokiran dan memberi saya pesan ini:

Kegagalan http selama parsing untuk http://10.0.1.19/api/login

Jika saya mengembalikan array kosong dari backend saya, itu berfungsi ... Jadi Angular mencoba mengurai respons saya sebagai JSON? Bagaimana saya bisa menonaktifkan ini?

angular typescript angular-httpclient nutzt
sumber

Jawaban:

235

Anda dapat menentukan bahwa data yang akan dikembalikan tidak menggunakan JSON responseType.

Dalam contoh Anda, Anda dapat menggunakan responseTypenilai string text, seperti ini:

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

Daftar lengkap opsi untuk responseTypeadalah:

  • json (default)
  • text
  • arraybuffer
  • blob

Lihat dokumen untuk informasi lebih lanjut.

Kirk Larkin
sumber
17

jika Anda punya pilihan

return this.http.post(`${this.endpoint}/account/login`,payload, { ...options, responseType: 'text' })
Trần Quang Hiệp
sumber
3

Bahkan menambahkan responseType, saya menanganinya selama berhari-hari tanpa hasil. Akhirnya saya mendapatkannya. Pastikan bahwa dalam skrip backend Anda tidak mendefinisikan header sebagai - ("Content-Type: application / json);

Karena jika Anda mengubahnya menjadi teks tetapi backend meminta json, itu akan mengembalikan kesalahan ...

Shemi
sumber
Anda juga dapat mengatur sebagai parameter untuk objek baru yang diturunkan dari kelas baru. lalu kembalikan objek ini sebagai tanggapan. yaitu Anda dapat mengubah tanggapan Anda ke format JSON
whitefang
1

Anda juga harus memeriksa JSON Anda (bukan di DevTools, tetapi di backend). Angular HttpClient mengalami kesulitan mengurai JSON dengan\0 karakter dan DevTools akan mengabaikannya, jadi cukup sulit ditemukan di Chrome.

Berdasarkan artikel ini

druss
sumber
1

Saya memiliki masalah yang sama dan penyebabnya adalah bahwa pada saat mengembalikan string di backend Anda (pegas), Anda mungkin kembali sebagai pengembalian "pegas bekas"; Tapi ini tidak diurai sesuai dengan musim semi. Sebagai gantinya gunakan return "\" spring used \ ""; -Tepat keluar

AVI
sumber
Dari Ulasan: Halo, posting ini sepertinya tidak memberikan jawaban yang berkualitas untuk pertanyaan tersebut. Harap edit jawaban Anda dan perbaiki, atau posting saja sebagai komentar.
sɐunıɔ ןɐ qɐp
Baiklah..SO untuk mis. dalam situasi saya, saya menggunakan Spring sebagai backend dan Angular di frontend. Setelah otentikasi yang benar, server musim semi saya harus mengembalikan string "valid" yang diproses hanya jika info login benar.
AVI
Masalah dengan program saya serupa yaitu. Kegagalan http selama parsing .... Kemudian saya menyadari bahwa musim semi sedang mempertimbangkan "respons server saya sebagai karakter khusus. Oleh karena itu, saya harus mengembalikan string yang juga dapat dipahami oleh backend ... Jadi saya mengembalikan" \ "valid \" " alih-alih "valid" dan \ notasi di web digunakan untuk menentukan "(koma terbalik) yang ditulis di dalam koma terbalik dari string {" \ "\" "alih-alih" "" "}. Dan setelah kesalahan itu tidak terlihat .. Saya harap ini lebih jelas sekarang @ sɐunıɔ ןɐ qɐp
AVI
0

Saya menghadapi masalah yang sama dalam aplikasi Angular saya. Saya menggunakan RocketChat REST API di aplikasi saya dan saya mencoba menggunakan rooms.createDiscussion, tetapi sebagai kesalahan seperti di bawah ini.

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":"

Saya telah mencoba beberapa hal seperti mengubah responseType: 'text'tetapi tidak ada yang berhasil. Pada akhirnya saya dapat menemukan masalahnya ada pada instalasi RocketChat saya. Seperti yang disebutkan dalam log perubahan RocketChat , APIrooms.createDiscussion telah diperkenalkan di versi 1.0.0 sayangnya saya menggunakan versi yang lebih rendah.

Saran saya adalah memeriksa REST API berfungsi dengan baik atau tidak sebelum Anda menghabiskan waktu untuk memperbaiki kesalahan dalam kode Angular Anda. Saya menggunakan curlperintah untuk memeriksa itu.

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"}'

Di sana juga saya mendapatkan HTML yang tidak valid sebagai tanggapan. 

<!DOCTYPE html>
<html>
<head>
<meta name="referrer" content="origin-when-crossorigin">
<script>/* eslint-disable */

'use strict';
(function() {
        var debounce = function debounce(func, wait, immediate) {

Alih-alih respons JSON yang valid sebagai berikut. 

{
    "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
}

Jadi setelah memperbarui ke RocketChat terbaru, saya dapat menggunakan REST API yang disebutkan.

Sibeesh Venu
sumber