Angular에서 실제 오류 메시지 대신 "Http failure response for (unknown url): 0 Unknown Error"가 나타난다.
는 Angular 4 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메시지가 표시됩니다.한편 chrome에서 실패한 요청을 검사하면 응답 상태가 422로 표시되고, "preview" 탭에는 실패 원인을 설명하는 실제 메시지가 표시됩니다.
Chrome 개발 도구에서 볼 수 있는 실제 응답 메시지에 액세스하려면 어떻게 해야 합니까?
다음은 문제를 보여주는 스크린샷입니다.
그 문제는 CORS와 관련이 있었다.Chrome 콘솔에서 다른 오류가 발생했습니다.
요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 'http://localhost:4200'은 액세스가 허용되지 않습니다.응답의 상태 코드는 HTTP 422였습니다.`
서버로부터의 합니다.Access-Control-Allow-Origin백엔드 nginx가 디렉티브를 사용하여 이러한 헤더를 응답에 추가하도록 설정되어 있는 경우에서도, header를 참조할 수 있습니다.
이 는 응답 또는 합니다.이치노 제가 쓸 요.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 사용을 강제하지 않음).원하시면 더 제한하실 수 있습니다.
main 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를 재구축하고 앱은 에뮬레이터와 전화 양쪽에서 통신할 수 있게 되었습니다.
네트워크 보안에 대한 자세한 내용은http://https://developer.android.com/training/articles/security-config.html#CleartextTrafficPermitted 를 참조해 주세요.
Chrome에서 광고 차단 확장 기능을 해제한 후 이 오류가 나타나는 이유는 브라우저에서 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();
}
lamda 옵션은 유창한 API이므로 필요한 추가 옵션을 추가하거나 제거할 수 있습니다.「Allow Any Origin」옵션을 사용해 임의의 도메인을 받아 들일 수 있습니다만, 누구로부터의 발신기지간 콜이 개시되기 때문에, 이것을 실시하지 않는 것을 강하게 추천합니다.또, 발신기지간 콜을 HTTP 메서드(GET/PUT/POST 등)로 제한할 수 있기 때문에, 도메인간의 GET 콜만을 표시할 수 있습니다.
서버측의 JsonSerializer가 원인입니다.예외.
Newtonsoft 요청을 실행하는 동안 처리되지 않은 예외가 발생했습니다.Json.Json 시리얼화예외:유형...을 사용하여 자체 참조 루프가 감지되었습니다.
고객은 다음과 같이 말했습니다.
POST http://localhost:61495/api/Action net::ERR_INCOMPLETE_CHUNKED_ENCODING
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
루프를 제거하여 응답 유형을 단순화하면 문제가 해결되었습니다.
이 오류는 Firefox에서 발생했지만 Chrome에서는 발생하지 않았습니다.이것은 Firefox가 로컬 API의 ssl 증명서를 신뢰하지 않았기 때문입니다(이것은 유효하지 않습니다만, Chrome은 신뢰하지만 ff는 신뢰하지 않습니다).API로 직접 이동하여 Firefox에서 예외를 추가하면 문제가 해결되었습니다.
노드 서비스인 경우 여기에 설명된 단계를 수행하십시오.
기본적으로는 Cross-Origin Resource Sharing(CORS) 오류입니다.이러한 오류에 대한 자세한 내용은 여기를 참조하십시오.
노드 서비스를 다음 행으로 업데이트하면 동작합니다.
let express = require("express");
let app = express();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
서버가 인식하는 유효한 클라이언트 증명서와 토큰을 제공하지 않은 경우에도 유사한 오류가 발생할 수 있습니다.
오류:
(알 수 없는 URL)에 대한 HTTP 오류 응답: 0 알 수 없는 오류
코드 예:
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
class MyCls1 {
constructor(private http: HttpClient) {
}
public myFunc(): void {
let http: HttpClient;
http.get(
'https://www.example.com/mypage',
{
headers:
new HttpHeaders(
{
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'MyClientCert': '', // This is empty
'MyToken': '' // This is empty
}
)
}
).pipe( map(res => res), catchError(err => throwError(err)) );
}
}
다: note note note noteMyClientCert&MyToken빈 문자열이므로 오류가 발생합니다.
MyClientCert&MyToken는 서버가 인식할 수 있는 임의의 이름입니다.
나는 내 요청이 끝날 때까지 2분 이상 걸릴 때마다 정확한 메시지를 받고 있었다.브라우저는 요청에서 연결을 끊지만 백엔드의 요청은 완료될 때까지 계속됩니다.서버(ASP).이 경우 NET Web API)는 접속 해제를 검출하지 않습니다.
하루 종일 검색한 후 이 답을 찾았습니다.프록시 설정을 사용할 경우 기본 타임아웃은 120초(2분)라는 것을 설명하고 있습니다.
따라서 프록시 설정을 편집하여 필요에 따라 설정할 수 있습니다.
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"timeout": 6000000
}
}
에이전트 킵얼라이브를 사용하여 NTLM 인증으로 동작하고 있었는데 에이전트의 타임아웃이 프록시의 타임아웃과 무관하다는 것을 몰랐기 때문에 둘 다 설정해야 합니다.이를 깨닫기까지 시간이 좀 걸렸습니다. 예를 들어 보겠습니다.
const Agent = require('agentkeepalive');
module.exports = {
'/api/': {
target: 'http://localhost:3000',
secure: false,
timeout: 6000000, // <-- this is needed as well
agent: new Agent({
maxSockets: 100,
keepAlive: true,
maxFreeSockets: 10,
keepAliveMsecs: 100000,
timeout: 6000000, // <-- this is for the agentkeepalive
freeSocketTimeout: 90000
}),
onProxyRes: proxyRes => {
let key = 'www-authenticate';
proxyRes.headers[key] = proxyRes.headers[key] &&
proxyRes.headers[key].split(',');
}
}
};
ASP를 사용하고 있습니다.NET SPA Extensions는 개발 중에 Angular의 포트 4200을 통과하는 포트 5000 및 5001에 프록시를 만듭니다.
HTTPS 포트 5001에 대해 CORS를 올바르게 셋업하고 모든 것이 정상이었지만, 실수로 포트 5000용 오래된 북마크로 이동하게 되었습니다.그런데 갑자기 이 메시지가 떴다.다른 사용자가 콘솔에서 말한 것처럼 'preflight' 오류 메시지가 있습니다.
따라서 환경에 관계없이 CORS를 사용하는 경우 호스트와 포트가 모두 중요하므로 모든 포트가 지정되어 있는지 확인하십시오.
Postman에서 제 요청이 잘 작동했기 때문에, 제게는 브라우저 문제였습니다.
로 인해 "Firefox" Chrome"로.6000ASP の asp asp asp asp asp asp asp asp asp asp와 NET API 포트4000에러는 기존의 CORS 에러로 변경되어 수정이 가능합니다.
주었다.ERR_UNSAFE_PORT그게 뭐가 잘못됐는지 단서가 됐어요
Larabel을 백엔드로 사용하는 경우, 이 코드를 붙여넣기만 하면 .htaccess 파일을 편집하여 Angular 또는 IONIC 프로젝트의 CROSS 문제를 해결할 수 있습니다.
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
제대로 된 코르스 헤더가 있다면.사내 네트워크가 cors 헤더를 떼어내고 있을 가능성이 있습니다.외부로부터 Web 사이트에 액세스 할 수 있는 경우는, 네트워크 밖에서 액세스 해, 네트워크의 원인이 문제의 원인인지 아닌지를 확인해 주세요.원인에 관계없이 좋은 방법입니다.
연결 파일에 이 코드 추가
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT,GET,POST,DELETE");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
nodejs를 백엔드로 사용하는 경우 다음 절차를 수행합니다.
백엔드 앱에 Cors 설치
npm 설치 코르스
이 코드 추가
const cors = require('cors'); const express = require('express'); const expressApp = express(); expressApp.use(cors({ origin: ['http://localhost:4200'], "methods": "GET,PUT,POST", "preflightContinue": false, "optionsSuccessStatus": 204, credentials: true }));
다른 질문만큼 오래되지는 않았지만, Ionic-Laravel 앱에서 이 문제를 해결하려고 했는데, 여기서 (및 다른 게시물들은) 아무것도 작동하지 않아서 https://github.com/barryvdh/laravel-cors complete를 Laravel에 설치하고 시작했는데, 꽤 잘 작동합니다.
제 것은 제가 문의하려고 했던 모델들의 잘못된 관계 때문에 생긴 것입니다.반응 디버깅을 통해 관계에서 충돌한 것을 알아냈습니다.
나에게 그것은 각도 문제가 아니었다.값이 (0000-00-00)인 DB의 DateTime 유형 필드였고, 내 모델은 해당 속성을 올바르게 바인딩할 수 없어서 (2019-08-12)와 같은 유효한 값으로 변경했습니다.
.net core, ODATA v4 및 MySql(EF pomelo 커넥터)을 사용하고 있습니다.
asp.net 코어에서 api 컨트롤러에 adnotation이 없는 경우[AllowAnonymous]를 컨트롤러 이름 위에 추가합니다.
[ApiController]
[Route("api/")]
[AllowAnonymous]
public class TestController : ControllerBase
서버를 제공할 때 --port를 사용해야 합니다. ng serve --open --포트 4200
export class DatabaseService {
baseUrl: String = "http://localhost:8080/";
constructor(private http: HttpClient) { }
saveTutorial(response) {
var fullUrl = this.baseUrl + "api/tutorials";
return this.http.post(fullUrl,response);
}
}
저도 같은 문제가 있었어요.위의 grdl의 답변을 사용하여 아래와 같은 cors 구성을 서버에 추가했더니 문제가 해결되었습니다.
{
"cors": [
{
"origin": [“*”],
"method": ["GET"],
"responseHeader": ["Content-Type"],
"maxAgeSeconds": 3600
}
]
}
서버의 설정 방법에 대해서는, 사용의 서버의 특정의 cors config 헬프를 참조해 주세요.
2022-07-13
이것이 가장 쉬운 방법이지만 PROD를 사용하지 마십시오.
index.html 내부에서 기존 파일을 추가하거나 편집합니다.<meta http-equiv="Content-Security-Policy" content="예를 들어 CORS는 로컬 IIS Express에 대한 접근을 차단했습니다.https://localhost:44387/api/test, 솔루션은 다음과 같습니다.
<meta http-equiv="Content-Security-Policy" content="
...
connect-src 'self' https://localhost:44387 https://anysite.com ...">
몇 가지 간단한 예를 들어 보겠습니다.
a) 네트워크가 절단되어 있습니다. - 0바이트 응답.
b) http 콜을 취소하면 이 메시지가 나타난다(네, 할 수 있습니다).
c) 부팅 중에 페이지를 너무 빨리 이동하면 angular가 제대로 연결되지 않았기 때문에 http 콜이 취소됩니다.이 문제를 막기 위해 페이지를 잠궜습니다.
d) 중간에 프록시가 있어 HTTP 타임아웃패킷을 송신하지 않고 30초 후에 접속을 종료했습니다.백엔드의 .net 로그를 보면 클라이언트 연결 해제 메시지가 나타납니다.(사용자가 브라우저를 닫기만 하면 되기 때문에 이는 드문 일이 아닙니다.)
이 모든 것이 나에게 일어났고, 나는 그것이 어떤 특정한 장애의 원인인지 어떻게 구분해야 할지 모르겠다.
이 경우 UseCors는 UseAuthentication/Authorization 뒤에 배치됩니다.서버에서 401 응답이 반환될 때 요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.
저의 오류는 파일이 너무 커서(dotnet core의 제한은 @~25Mb인 것 같습니다.설정
- web.config의 maxAllowedContentLength ~4294967295(uint의 최대값)
- [DisableRequestSizeLimit]를 사용한 컨트롤러 액션 꾸미기
- 서비스를 제공합니다.구성(옵션 = > { options).Multipart Body Length Limit = 4294967295; } ; Startup.cs 。
문제를 해결해 주셨어요.
언급URL : https://stackoverflow.com/questions/47180634/i-get-http-failure-response-for-unknown-url-0-unknown-error-instead-of-actu
'programing' 카테고리의 다른 글
| 리액트 테스트 라이브러리:테스트 스타일(특히 배경 이미지) (0) | 2023.03.21 |
|---|---|
| 세미콜론을 더 예쁘게 지우는 방법? (0) | 2023.03.21 |
| PHP 및 jQuery를 사용하여 보안 AJAX 요청을 보내는 방법 (0) | 2023.03.21 |
| 웹 팩을 사용하여 CDN 또는 외부 벤더 javascript lib를 html 파일이 아닌 js 파일로 로드하는 방법 (0) | 2023.03.21 |
| react와 함께 materialize-css를 사용하는 방법 (0) | 2023.03.21 |