programing

Angular HttpClient "해석 중 Http 오류"

testmans 2023. 2. 24. 13:21
반응형

Angular HttpClient "해석 중 Http 오류"

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

My Login Service에는 다음 방법이 있습니다.

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

Login Component에서 다음 메서드를 구독합니다.

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

Larabel 백엔드 메서드는 다음과 같습니다.

...

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 오류 발생

백엔드에서 빈 어레이를 반환하면 동작합니다.앵글이 내 대답을 JSON으로 해석하려고 하는 거야?어떻게 하면 비활성화 시킬 수 있나요?

반환되는 데이터가 JSON이 아님을 지정할 수 있습니다.responseType.

이 예에서는,responseType문자열 값text:

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

의 전체 옵션 목록responseType다음과 같습니다.

  • json(디폴트)
  • text
  • arraybuffer
  • blob

상세한 것에 대하여는, 문서를 참조해 주세요.

get/post 메서드에서 일반 인수를 생략해야 한다는 것을 추가하고 싶습니다..get<T>).

✔이 방법은 다음과 같습니다.

this.http.get(`https://myapi.com/health`, {responseType: 'text'})

❌ 이 방법은 작동하지 않습니다.

this.http.get<string>(`https://myapi.com/health`, {responseType: 'text'})

후자를 지정하면 다음과 같은 오류가 발생합니다.

필요한 유형은 속성 '응답'에서 가져옵니다.유형 '{ 헤더'에 선언된 유형':HttpHeaders | { [ header : string ]: string | string [ ] ; } | 정의되지 않았습니다.관찰: "이벤트"; 컨텍스트:Http Context | 정의되지 않음; 파라미터:HttpParams | { ...; } | 정의되지 않음; reportProgress?: boolean | 정의되지 않음; responseType ? :"json" | 정의되지 않음, credentials 포함?: boolean | 정의되지 않음; }'

옵션이 있는 경우

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

response Type을 추가해도 며칠 동안 대처했지만 성공하지 못했습니다.드디어 이해했어요.백엔드 스크립트에서 헤더를 -("Content-Type: application/json")로 정의하지 마십시오.

텍스트로 전환했는데 백엔드가 json을 요청하면 오류가 반환되기 때문에...

저도 같은 문제가 있었습니다만, 그 원인은 백엔드(스프링)의 스트링을 반환할 때 반환 "스프링 사용"으로 반환될 수 있다는 것입니다.그러나 이것은 스프링에 따라 올바르게 해석되지 않습니다.대신 리턴 "\" 스프링을 사용합니다.\"; - Peace out

제 경우 리소스 바로 뒤에 있는 URL 호출에 "/"가 누락된 것이 문제였습니다.그런 다음 JSON 리소스 대신 angular component(html)를 가져오려고 했습니다.저는 이 스레드에서 제 질문에 대한 답을 찾지 못했기 때문에 이것이 도움이 되기를 바랍니다.

JSON은 DevTools를 사용합니다.과 JSON의 을 겪고 Http \0[DevTools] : Chrome 에에에에에에에 。

이 기사를 바탕으로

저도 같은 문제가 있었습니다만, 저는 api에 프록시 URL을 추가하는 것을 잊었습니다.

readonly apiUrl = this.appConfigService.appConfig.apiUrl + 'EndPointUrl';

이 답변이 도움이 되었습니다.https://stackoverflow.com/a/66887643/12134299

제 경우 PHP 결과에서 줄 바꿈이 있었습니다.

예.,

echo json_encode($row)."\<br/>";

제거했습니다.<br/>이치노

저는 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'아무도 안 먹혔어느니?마지막으로 문제가 Rocket Chat 설치 문제라는 것을 알 수 있었습니다.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
}

그래서 최신 Rocket Chat으로 업데이트한 후 언급한 REST API를 사용할 수 있었습니다.

저는 백엔드 태스크에 .NetCore를 사용하고 있습니다.Newtonsoft를 사용하여 이 문제를 해결할 수 있었습니다.컨트롤러에서 JSON 문자열을 반환하는 Json 라이브러리 패키지입니다.

모든 JSON 시리얼라이저가 올바른 사양으로 구축되어 있는 것은 아닌 것 같습니다.NET 5의 "return OK ("");"는 결코 충분하지 않았습니다.

언급URL : https://stackoverflow.com/questions/46408537/angular-httpclient-http-failure-during-parsing

반응형