Açısal HttpClient "Ayrıştırma sırasında Http hatası"

Question 1

Angular 4'ten Laravel arka ucuma bir POST isteği göndermeye çalışıyorum.

LoginService'im şu yönteme sahiptir:

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

LoginComponent'imde bu yönteme abone oluyorum:

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

Ve bu benim Laravel arka uç yöntemim:

...

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

return response('Unauthorized', 401);

Chrome geliştirme araçlarım, isteğimin 200 durum koduyla başarılı olduğunu söylüyor. Ancak Açısal kodum errorbloğu tetikliyor ve bana şu mesajı veriyor:

İçin Ayrıştırma sırasında http hatası http://10.0.1.19/api/login

Arka ucumdan boş bir dizi döndürürsem işe yarıyor ... Yani Angular yanıtımı JSON olarak ayrıştırmaya mı çalışıyor? Bunu nasıl devre dışı bırakabilirim?

Question 2

Veri edilir iade edilecek belirtebilirsiniz değil JSON kullanarak responseType.

responseTypeÖrneğinizde text, aşağıdaki gibi bir dize değeri kullanabilirsiniz :

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

İçin seçeneklerin tam listesi responseType:

json (varsayılan)
text
arraybuffer
blob

Daha fazla bilgi için belgelere bakın .

Question 3

seçeneklerin varsa

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

Question 4

ResponseType'ı bile ekledim, başarılı olamayan günler boyunca bununla uğraştım. Sonunda anladım. Arka uç komut dosyanızda başlığı - ("Content-Type: application / json); olarak tanımlamadığınızdan emin olun;

Çünkü onu metne çevirirseniz ancak arka uç json'ı sorarsa, bir hata döndürür ...

Question 5

Ben de aynı sorunu yaşadım ve nedeni şuydu: Arka ucunuzda (bahar) bir dizi döndürdüğünüzde, "yay kullanılmış" dönüşü olarak geri dönüyor olabilirsiniz; Ancak bu, bahara göre doğru bir şekilde ayrıştırılmaz. Bunun yerine return "\" yay kullanılmış \ "" kullanın; -Sakin ol

Question 6

Ayrıca JSON'nizi de kontrol etmelisiniz (DevTools'ta değil, arka uçta). Açısal HttpClient, \0JSON'u karakterlerle ayrıştırmakta zorlanıyor ve DevTools bu durumda görmezden gelecektir, bu nedenle Chrome'da fark edilmesi oldukça zordur.

Dayanarak bu makalede

Question 7

Angular başvurumda da aynı sorunla karşılaşıyordum. RocketChat REST API'yi uygulamamda kullanıyordum ve rooms.createDiscussionaşağıdaki gibi bir hata olarak kullanmaya çalışıyordum .

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

Değiştirmek gibi birkaç şeyi denedim responseType: 'text'ama hiçbiri işe yaramadı. Sonunda sorunun RocketChat kurulumumda olduğunu bulabildim. RocketChat değişiklik günlüğünde belirtildiği gibi , API rooms.createDiscussion1.0.0 sürümünde tanıtıldı maalesef daha düşük bir sürüm kullanıyordum.

Benim önerim, Angular kodunuzdaki hatayı düzeltmek için zaman harcamadan önce REST API'nin iyi çalışıp çalışmadığını kontrol etmektir. Bunu curlkontrol etmek için komut kullandım .

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

Orada da yanıt olarak geçersiz bir HTML alıyordum.

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

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

Aşağıdaki gibi geçerli bir JSON yanıtı yerine.

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

En son RocketChat'e güncelledikten sonra , bahsedilen REST API'yi kullanabildim.