Angular HttpClient "Http thất bại trong quá trình phân tích cú pháp"


105

Tôi cố gắng gửi một yêu cầu POST từ Angular 4 đến phần phụ trợ Laravel của mình.

LoginService của tôi có phương pháp này:

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

Tôi đăng ký phương pháp này trong LoginComponent của mình:

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

Và đây là phương thức phụ trợ Laravel của tôi:

...

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

return response('Unauthorized', 401);

Các công cụ dành cho nhà phát triển Chrome của tôi cho biết rằng yêu cầu của tôi đã thành công với 200 mã trạng thái. Nhưng mã Angular của tôi kích hoạt errorkhối và gửi cho tôi thông báo này:

Http không thành công trong khi phân tích cú pháp cho http://10.0.1.19/api/login

Nếu tôi trả về một mảng trống từ chương trình phụ trợ của mình, nó sẽ hoạt động ... Vì vậy, Angular đang cố gắng phân tích cú pháp phản hồi của tôi dưới dạng JSON? Làm cách nào tôi có thể tắt tính năng này?

Câu trả lời:


230

Bạn có thể chỉ định rằng dữ liệu được trả về không phải là JSON đang sử dụng responseType.

Trong ví dụ của bạn, bạn có thể sử dụng responseTypegiá trị chuỗi text, như sau:

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

Danh sách đầy đủ các tùy chọn cho responseTypelà:

  • json (mặc định)
  • text
  • arraybuffer
  • blob

Xem tài liệu để biết thêm thông tin.


17

nếu bạn có tùy chọn

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

3

Ngay cả khi thêm responseType, tôi đã xử lý nó trong nhiều ngày mà không thành công. Cuối cùng thì tôi cũng nhận được. Đảm bảo rằng trong tập lệnh phụ trợ của bạn, bạn không xác định tiêu đề là - ("Content-Type: application / json);

Nếu bạn chuyển nó thành văn bản nhưng chương trình phụ trợ yêu cầu json, nó sẽ trả về lỗi ...


Ngoài ra, bạn có thể đặt làm tham số cho đối tượng mới được dẫn xuất từ ​​lớp mới. sau đó trả về đối tượng này dưới dạng phản hồi. tức là bạn có thể thay đổi câu trả lời của mình thành định dạng JSON
whitefang

1

Bạn cũng nên kiểm tra JSON của mình (không phải trong DevTools, mà là trên chương trình phụ trợ). Angular HttpClient gặp khó khăn khi phân tích cú pháp JSON với các \0ký tự và DevTools sẽ bỏ qua sau đó, vì vậy khá khó phát hiện trong Chrome.

Dựa trên bài báo này


1

Tôi đã gặp vấn đề tương tự và nguyên nhân là do tại thời điểm trả về một chuỗi trong phần phụ trợ của bạn (mùa xuân), bạn có thể trả về dưới dạng trả về "spring used"; Nhưng điều này không được phân tích đúng theo mùa xuân. Thay vào đó, hãy sử dụng return "\" spring used \ ""; -Đi ra


Từ đánh giá: Xin chào, bài đăng này dường như không cung cấp câu trả lời chất lượng cho câu hỏi. Vui lòng chỉnh sửa câu trả lời của bạn và cải thiện nó, hoặc chỉ đăng nó dưới dạng nhận xét.
sɐunıɔ ןɐ qɐp

Được rồi..SO cho ví dụ. trong tình huống của tôi, tôi đã sử dụng Spring làm phụ trợ và Angular ở giao diện người dùng. Sau khi xác thực chính xác, máy chủ mùa xuân của tôi phải trả lại cho tôi một chuỗi "hợp lệ" chỉ được xử lý nếu thông tin đăng nhập chính xác.
AVI

Vấn đề với chương trình của tôi cũng tương tự như vậy. Lỗi htp trong quá trình phân tích cú pháp .... Sau đó, tôi nhận ra rằng spring đang coi "phản hồi máy chủ của tôi là ký tự đặc biệt. Do đó, tôi phải trả về một chuỗi mà phần phụ trợ cũng có thể hiểu được ... Vì vậy, tôi đã trả về" \ "valid \" " thay vì "hợp lệ" và \ ký hiệu trong web được sử dụng để chỉ định "(dấu hôn mê đảo ngược) được viết bên trong dấu phẩy ngược của chuỗi {" \ "\" "thay vì" "" "}. Và sau đó lỗi đó không còn thấy nữa..Tôi hy vọng nó rõ ràng hơn bây giờ @ sɐunıɔ ןɐ qɐp
AVI

0

Tôi đang gặp phải vấn đề tương tự trong ứng dụng Angular của mình. Tôi đang sử dụng RocketChat REST API trong ứng dụng của mình và tôi đang cố gắng sử dụng rooms.createDiscussion, nhưng gặp lỗi như bên dưới.

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

Tôi đã thử một vài cách như thay đổi responseType: 'text'nhưng không có cách nào trong số đó hoạt động. Cuối cùng, tôi có thể tìm thấy vấn đề là do cài đặt RocketChat của tôi. Như đã đề cập trong nhật ký thay đổi RocketChat , API rooms.createDiscussionđược giới thiệu trong phiên bản 1.0.0, tiếc là tôi đang sử dụng phiên bản thấp hơn.

Đề xuất của tôi là kiểm tra REST API có hoạt động tốt hay không trước khi bạn dành thời gian để sửa lỗi trong mã Angular của mình. Tôi đã sử dụng curllệnh để kiểm tra điều đó.

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

Ở đó, tôi cũng nhận được một phản hồi HTML không hợp lệ.

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

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

Thay vì một phản hồi JSON hợp lệ như sau.

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

Vì vậy, sau khi cập nhật lên RocketChat mới nhất, tôi đã có thể sử dụng API REST được đề cập.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.