Angular HttpClient "파싱 중 Http 실패"

106

Angular 4에서 Laravel 백엔드로 POST 요청을 보내려고합니다.

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 상태 코드가있는 내 요청이 성공했다고합니다. 그러나 내 Angular 코드는 error블록을 트리거하고 다음 메시지를 제공합니다.

http://10.0.1.19/api/login에 대한 구문 분석 중 HTTP 실패

백엔드에서 빈 배열을 반환하면 작동합니다 ... 그래서 Angular가 내 응답을 JSON으로 구문 분석하려고합니까? 어떻게 비활성화 할 수 있습니까?

angular typescript angular-httpclient

— Nutzt
소스

233

.NET을 사용하여 반환 할 데이터가 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을 요청하면 오류가 반환됩니다.

— Shemi
소스

또한 새 클래스에서 파생 된 새 개체에 대한 매개 변수로 설정할 수 있습니다. 그런 다음이 객체를 응답으로 반환합니다. 즉, 응답을 JSON 형식으로 변경할 수 있습니다

— whitefang

1

또한 JSON을 확인해야합니다 (DevTools가 아니라 백엔드에서). \0문자와 DevTools로 JSON을 파싱하는 데 어려움을 겪는 Angular HttpClient는 이를 무시하므로 Chrome에서 찾기가 매우 어렵습니다.

이 기사를 바탕으로

— 드 루스
소스

1

나는 똑같은 문제가 있었고 그 원인은 백엔드 (봄)에서 문자열을 반환 할 때 "봄이 사용됨"으로 반환 될 수 있다는 것입니다. 그러나 이것은 봄에 따라 올바르게 구문 분석되지 않았습니다. 대신 return "\"spring used \ ""를 사용하십시오. -평화

— AVI
소스

리뷰에서 : 안녕하세요,이 게시물은 질문에 대한 양질의 답변 을 제공하지 않는 것 같습니다 . 답변을 수정하고 개선하거나 댓글로 게시하세요.

— sɐunıɔ ןɐ qɐp

예. 예. 내 상황에서는 Spring을 백엔드로 사용하고 Angular를 프론트 엔드로 사용했습니다. 올바른 인증 후 내 스프링 서버는 로그인 정보가 올바른 경우에만 처리되는 "유효한"문자열을 반환해야합니다.

— AVI

내 프로그램의 문제는 비슷했습니다. 구문 분석 중 Http 실패 .... 그런 다음 Spring이 내 서버 응답을 특수 문자로 "고려하고 있음을 깨달았습니다. 따라서 백엔드도 이해할 수있는 문자열을 반환해야했습니다 ... 그래서"\ "valid \" "를 반환했습니다. 웹에서 "유효"및 \ 표기법 대신 "" ""} 대신 문자열 { "\"\ ""의 반전 된 쉼표 안에 작성된 "(반전 된 쉼표)를 지정하는 데 사용됩니다. 그리고 그 오류를 볼 수 없었습니다 .. 이제 @ 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에서 도입되었습니다. 아쉽게도 낮은 버전을 사용하고있었습니다.

내 제안은 Angular 코드의 오류를 수정하는 데 시간을 보내기 전에 REST API가 제대로 작동하는지 확인하는 것입니다. 나는 그것을 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를 사용할 수있었습니다.

— Sibeesh Venu
소스