Angular HttpClient“ HTTP ล้มเหลวระหว่างการแยกวิเคราะห์”

Question 1

ฉันพยายามส่งคำขอ POST จาก Angular 4 ไปยังแบ็กเอนด์ Laravel ของฉัน

My 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 แต่รหัสเชิงมุมของฉันทริกเกอร์errorบล็อกและให้ข้อความนี้:

HTTP ล้มเหลวระหว่างการแยกวิเคราะห์สำหรับhttp://10.0.1.19/api/login

ถ้าฉันส่งคืนอาร์เรย์ว่างจากแบ็กเอนด์ของฉันก็ใช้ได้ ... ดังนั้น Angular จึงพยายามแยกวิเคราะห์คำตอบของฉันเป็น JSON? ฉันจะปิดการใช้งานนี้ได้อย่างไร?

Question 2

คุณสามารถระบุได้ว่าข้อมูลจะถูกส่งกลับคือไม่ JSON responseTypeใช้

ในตัวอย่างของคุณคุณสามารถใช้responseTypeค่าสตริงtextดังนี้:

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

รายการตัวเลือกทั้งหมดสำหรับresponseTypeคือ:

json (ค่าเริ่มต้น)
text
arraybuffer
blob

ดูเอกสารสำหรับข้อมูลเพิ่มเติม

Question 3

หากคุณมีตัวเลือก

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

Question 4

แม้แต่การเพิ่ม responseType ฉันก็จัดการกับมันหลายวันโดยไม่ประสบความสำเร็จ ในที่สุดผมก็ได้ ตรวจสอบให้แน่ใจว่าในสคริปต์แบ็กเอนด์ของคุณคุณไม่ได้กำหนดส่วนหัวเป็น - ("Content-Type: application / json);

หากคุณเปลี่ยนเป็นข้อความ แต่แบ็กเอนด์ขอ json มันจะส่งคืนข้อผิดพลาด ...

Question 5

ฉันมีปัญหาเดียวกันและสาเหตุก็คือในขณะที่ส่งคืนสตริงในแบ็กเอนด์ของคุณ (ฤดูใบไม้ผลิ) คุณอาจกลับมาเป็น "สปริงที่ใช้" กลับคืนมา แต่นี่ไม่ได้แยกวิเคราะห์อย่างถูกต้องตามฤดูใบไม้ผลิ แทนที่จะใช้ return "\" spring used \ ""; -ลาก่อน

Question 6

คุณควรตรวจสอบ JSON ของคุณด้วย (ไม่ใช่ใน DevTools แต่อยู่ในแบ็กเอนด์) Angular HttpClient มีปัญหาในการแยกวิเคราะห์ JSON ด้วย\0อักขระและ DevTools จะเพิกเฉยดังนั้นจึงค่อนข้างยากที่จะระบุใน Chrome

อ้างอิงจากบทความนี้

Question 7

ฉันประสบปัญหาเดียวกันในแอปพลิเคชัน 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 น่าเสียดายที่ฉันใช้เวอร์ชันที่ต่ำกว่า

คำแนะนำของฉันคือตรวจสอบว่า 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 ที่กล่าวถึงได้