[angular] Angular의 실제 오류 메시지 대신 "(unknown url) : 0 Unknown Error"에 대한 HTTP 실패 응답이 표시됩니다.

Angular 4 HttpClient를 사용하여 외부 서비스에 요청을 보냅니다. 매우 표준적인 설정입니다.

this.httpClient.get(url).subscribe(response => {
  //do something with response
}, err => {
  console.log(err.message);
}, () => {
  console.log('completed');
}

문제는 요청이 실패하면 Http failure response for (unknown url): 0 Unknown Error콘솔에 일반
메시지가 표시된다는 것입니다. 한편 크롬에서 실패한 요청을 살펴보면 응답 상태가 422임을 알 수 있으며 “미리보기”탭에서 실패 원인을 설명하는 실제 메시지를 볼 수 있습니다.

크롬 개발 도구에서 볼 수있는 실제 응답 메시지에 어떻게 액세스합니까?

다음은 문제를 보여주는 스크린 샷입니다.

답변

문제는 CORS 와 관련이 있습니다. Chrome 콘솔에 또 다른 오류가 있음을 발견했습니다.

요청 된 리소스에 ‘Access-Control-Allow-Origin’헤더가 없습니다. 따라서 원본 ‘ http : // localhost : 4200 ‘은 액세스가 허용되지 않습니다. 응답에 HTTP 상태 코드 422가 있습니다 .`

이는 Access-Control-Allow-Origin백엔드 nginx가 add_header지시문 을 사용하여 응답에 해당 헤더를 추가하도록 구성되었지만 백엔드 서버의 응답에 헤더 가 없음을 의미합니다 .

그러나이 지시문은 응답 코드가 20X 또는 30X 인 경우에만 헤더를 추가합니다. 오류 응답에서 헤더가 누락되었습니다. always응답 코드에 관계없이 헤더가 추가되었는지 확인 하기 위해 매개 변수 를 사용해야했습니다 .

add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;

백엔드가 올바르게 구성되면 Angular 코드의 실제 오류 메시지에 액세스 할 수 있습니다.

답변

다른 사람이 나처럼 길을 잃은 경우 … 내 문제는 CORS로 인한 것이 아닙니다 (서버에 대한 모든 권한이 있고 CORS가 올바르게 구성되었습니다!).

내 문제는 기본적으로 일반 텍스트 네트워크 통신 을 비활성화 하는 Android 플랫폼 레벨 28을 사용 하고 있고 내 랩톱의 IP (API 서버를 실행하는)를 가리키는 앱을 개발하려고했기 때문입니다. API 기본 URL은 http : // [LAPTOP_IP] : 8081 과 유사 합니다. https 가 아니기 때문에 android webview는 내 노트북의 전화 / 에뮬레이터와 서버 간의 네트워크 xfer를 완전히 차단합니다. 이 문제를 해결하려면 :

네트워크 보안 구성 추가

프로젝트의 새 파일 : resources / android / xml / network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <!-- Set application-wide security config -->
  <base-config cleartextTrafficPermitted="true"/>
</network-security-config>

참고 : 앱에서 모든 일반 텍스트를 허용하므로 신중하게 사용해야합니다 (https를 강제로 사용하지 않음). 원하는 경우 더 제한 할 수 있습니다.

기본 config.xml에서 구성 참조

<platform name="android">
    ...
    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
        <application android:networkSecurityConfig="@xml/network_security_config" />
    </edit-config>
    <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
    ....
</platform>

그게 다야! 거기에서 APK를 다시 빌드했고 앱은 이제 에뮬레이터와 전화 모두에서 통신 할 수있었습니다.

네트워크 초에 대한 추가 정보 : https://developer.android.com/training/articles/security-config.html#CleartextTrafficPermitted

답변

크롬에서 광고 차단 확장 프로그램을 끈 후 나를 위해 일하면 브라우저에서 http를 차단하는 것이 있기 때문에이 오류가 나타납니다.

답변

.NET Core 애플리케이션을 사용하는 경우이 솔루션이 도움이 될 수 있습니다!

또한 이것은 프런트 엔드 애플리케이션 의 Angular 또는 기타 요청 오류 가 아닐 수 있습니다.

먼저 Microsoft CORS Nuget 패키지를 추가해야합니다.

Install-Package Microsoft.AspNetCore.Cors

그런 다음 startup.cs에 CORS 서비스를 추가해야합니다. ConfigureServices 메서드에는 다음과 비슷한 것이 있어야합니다.

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
}

다음으로 CORS 미들웨어를 앱에 추가합니다. startup.cs에는 Configure 메서드가 있어야합니다. 다음과 유사해야합니다.

public void Configure(IApplicationBuilder app, IHostingEnvironment env,
ILoggerFactory loggerFactory)
{
    app.UseCors( options =>
    options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
    app.UseMvc();
}

옵션 lambda는 유창한 API이므로 필요한 추가 옵션을 추가 / 제거 할 수 있습니다. 실제로 “AllowAnyOrigin”옵션을 사용하여 모든 도메인을 수락 할 수 있지만, 다른 사람으로부터 교차 원본 호출이 열리기 때문에 이렇게하지 않는 것이 좋습니다. 또한 원본 간 호출을 해당 HTTP 메서드 (GET / PUT / POST 등)로 제한 할 수 있으므로 도메인 간 GET 호출 만 노출 할 수 있습니다.

답변

이 오류는 Firefox에서 발생했지만 로컬에서 개발하는 동안 Chrome에서는 발생하지 않았으며 Firefox가 내 로컬 API의 SSL 인증서를 신뢰하지 않기 때문에 발생하는 것으로 나타났습니다 (유효하지 않지만 로컬 인증서 저장소에 추가했습니다. 크롬은 그것을 신뢰하지만 ff는 아닙니다). API로 직접 이동하고 Firefox에서 예외를 추가하면 문제가 해결되었습니다.

답변

나를 위해 그것은 서버 측 JsonSerializerException으로 인해 발생했습니다.

요청을 실행하는 동안 처리되지 않은 예외가 발생했습니다. Newtonsoft.Json.JsonSerializationException : Self referencing loop detected with type …

클라이언트는 다음과 같이 말했습니다.

POST http://localhost:61495/api/Action net::ERR_INCOMPLETE_CHUNKED_ENCODING
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}

루프를 제거하여 응답 유형을 더 간단하게 만들면 문제가 해결되었습니다.

답변

Laravel을 백엔드로 사용하는 경우이 코드를 붙여 넣어 .htaccess 파일을 편집하여 Angular 또는 IONIC 프로젝트의 CROS 문제를 해결하십시오.

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"