development

Chrome 디버거에 '주의 : 임시 헤더가 표시됨'

big-blog 2020. 2. 26. 07:54
반응형

Chrome 디버거에 '주의 : 임시 헤더가 표시됨'


Google 크롬 검사기 (F12)를 사용하여 다운로드 한 리소스를 볼 때 이상한주의 메시지가 나타났습니다.

주의 임시 헤더가 표시됩니다

여기에 이미지 설명을 입력하십시오

네트워크 패널과 관련이있을 수 있습니다 . 임시 요청 헤더에주의를 기울 이십시오. 그러나 완전히 이해하지 못했습니다. 관련 질문은 ChromeHttp 요청 뿐만 아니라 Chrome 차단 요청로드 할 수 없습니다. 언로드 된 리소스는주의를 나타냅니다. 임시 헤더가 표시 됩니다.

첫 번째 질문마찬가지로 내 리소스가 차단되었지만 나중에 동일한 리소스가 자동으로로드되었습니다. 두 번째 질문 과 달리 , 나는 아무것도 고치고 싶지 않다. 이 메시지의 의미와 수신 이유를 알고 싶습니다.


확장 프로그램 (필자의 경우 AdBlock)에 의해 리소스가 차단되었을 수 있습니다.

해당 리소스 검색 요청이 작성되지 않았으므로 표시되는 헤더가 실제가 아니기 때문에 메시지가 표시됩니다. 언급 한 문제에서 설명한 것처럼 서버가 응답하면 실제 헤더가 업데이트되지만 요청이 차단되면 응답이 없습니다.


내 리소스를 차단하는 확장 프로그램에 대해 찾은 방법은 Chrome의 net-internals 도구를 사용하는 것입니다.

최신 버전의 크롬

  • 입력 chrome://net-export/주소 표시 줄에 입력하고 Enter 키를 누르십시오.
  • 녹음을 시작하십시오. 그리고 녹음 파일을 로컬에 저장하십시오.
  • 문제가있는 페이지를여십시오.
  • 인터넷 내부로 돌아 가기
  • 여기에서 기록 된 로그 파일을 볼 수 있습니다 https://netlog-viewer.appspot.com/#import
  • 이벤트 (###)를 클릭 하고 텍스트 필드를 사용하여 리소스와 관련된 이벤트를 찾으십시오 (URL의 일부 사용).
  • 마지막으로 이벤트를 클릭하고 표시된 정보가 무언가를 알려주는지 확인하십시오.

이전 버전의 크롬

  • 입력 chrome://net-internals주소 표시 줄에 입력하고 Enter 키를 누르십시오.
  • 문제가있는 페이지를여십시오.
  • net-internals로 돌아가서 events (###)를 클릭 하고 텍스트 필드를 사용하여 자원과 관련된 이벤트를 찾으십시오 (URL의 일부 사용).
  • 마지막으로 이벤트를 클릭하고 표시된 정보가 무언가를 알려주는지 확인하십시오.

실제 요청이 전송되지 않을 때 발생한다고 생각합니다. 일반적으로 캐시 된 리소스를로드 할 때 발생합니다.


크롬 v72 +의 경우 나를 위해 해결 한 것은 이것뿐입니다.

chrome://flags/이 3 플래그 로 이동하여 비활성화하십시오.

  • 사이트 격리 비활성화
  • 네트워크 서비스 활성화
  • 네트워크 서비스를 프로세스 내에서 실행

여기에 이미지 설명을 입력하십시오

또는 명령 줄에서 수행 할 수 있습니다.

chrome --disable-site-isolation-trials --disable-features=NetworkService,NetworkServiceInProcess

왜 이런 일이?

Google은 Chromium 엔진을 모듈 식 구조로 리팩토링하고 있으며, 다른 서비스는 독립형 모듈과 프로세스로 분리됩니다. 그들은이 과정을 서비스 화라고 부릅니다. 네트워크 서비스가 첫 번째 단계이며 Ui 서비스, ID 서비스 및 장치 서비스가 출시됩니다. Google은 Chromium 프로젝트 사이트 에서 공식 정보를 제공합니다 .

그것을 바꾸는 것이 위험합니까?

예를 들어 네트워킹입니다. 일단 네트워크 서비스가 제공되면 안정성 / 보안을 개선하기 위해 프로세스에서 실행을 중단 하거나 리소스가 제한되어있는 경우 인 프로세스를 선택할 수 있습니다 . 출처


이 문제가 발생하여 특정 원인을 식별 할 수있었습니다.이 원인은 답변이나 질문에서 언급되지 않았습니다.

SSL에서 전체 js 스택, 각도 프런트 엔드 및 노드 백 엔드를 실행 중이며 API는 포트 8081에서 실행되는 다른 도메인에 있으므로 API에서 세션 쿠키를 삭제하면서 CORS 요청 및 withcredentials를 수행하고 있습니다.

특히 내 시나리오는 다음과 같습니다. POST 요청, 포트 8081에 대한 자격 증명을 사용하여 관리자에서 "주의 : 임시 헤더가 표시됨"메시지가 발생하고 요청이 모두 함께 차단되었습니다.

내 솔루션은 일반적인 SSL 포트 443에서 노드 SSL 포트 8081로 요청을 프록시로 전달하도록 아파치를 설정하는 것입니다 (노드는 prod에서 루트로 실행할 수 없으므로 더 높은 포트에 있어야합니다). 따라서 Chrome은 기존의 SSL 포트에 대한 SSL 요청을 좋아하지 않지만 오류 메시지가 더 구체적 일 수 있습니다.


사이트 격리 라는 새로운 기능 으로 인해이 문제가 발생할 수도 있습니다 (교차 출처 요청에만 해당).

이 페이지에는 문제와 해결 방법이 자세히 설명되어 있습니다. chrome://flags/#site-isolation-trial-opt-out크롬 으로 이동하여 해당 설정을 "Opt-out"으로 변경하고 크롬을 다시로드하는 것입니다.

그것은 A의 알려진 문제 . 그러나 그 페이지는 크롬 68에서 수정되었다고 말하지만 크롬 68을 실행 중이며 여전히 문제가 있습니다.


HTTP / 2 푸시 자원Provisional headers are shown@wvega가 위의 답변에 게시 한 것과 동일한 이론에 대해 인스펙터에서 생성 됩니다 .

예 : 서버가 리소스를 클라이언트에 푸시 하기 때문에 (클라이언트가 요청하기 전에 ) 브라우저에 리소스가 캐시되므로 클라이언트는 요청을하지 않거나 필요로하지 않습니다. 그래서 ...

... 실제 헤더는 서버가 응답 할 때 업데이트되지만 요청이 차단 된 경우 응답이 없습니다.


내 상황은 교차 출처 와 관련이 있습니다.
상황 : 브라우저는 또는 OPTIONS같은 실제 요청을 보내기 전에 요청을 보냅니다 . 백엔드 개발자는 요청 을 처리하는 것을 잊어 버려 서비스 코드를 통과시켜 처리 시간이 너무 길어집니다. 초기화에 쓴 시간 초과 설정보다 긴 시간 은 5000 밀리 초입니다. 따라서 실제 요청을 보낼 수 없어서 문제 가 발생했습니다 . 솔루션 : 요청에 관해서는 백엔드 API가 결과를 반환하므로 요청이 더 빨라지고 시간 초과 전에 실제 요청을 보낼 수 있습니다.GETPOSTOPTIONSaxiosprovisional headers are shown
OPTIONS


내 대답이 당신을 도울 시간이 아닌 것 같지만 다른 사람들이 도움이 될 수 있습니다. 내가 만든 jQuery Ajax Post 스크립트와 비슷한 문제가 발생했습니다.

게시물을 실행하는 데 사용한 A 태그의 href 속성에 오타가있는 것으로 나타났습니다. href = " javacsript :;"을 입력했습니다 . ( 's'및 'c'반전). 이로 인해 게시물이 실행되는 동안 스크립트가 페이지를 새로 고치려고했습니다. 오타를 수정하고 완벽하게 작동했습니다.


이 메시지는 HSTS를 사용하여 웹 사이트를 보호 할 때 발생할 수 있습니다 . 그런 다음 누군가가 HTTP 버전의 URL에 링크 할 때 HSTS의 지시에 따라 브라우저는 HTTP 요청을 발행하지 않지만 내부적으로 HTTPS 자원으로 안전하게 리디렉션합니다. 이것은 sslstrip 과 같은 HTTPS 다운 그레이드 공격을 피하기위한 입니다.


Ajax 요청을 보냈을 때 location.href 또는 이와 유사한 것을 사용하여 페이지를 다른 페이지로 이동했을 수 있습니다. 따라서 이전 요청이 실패했습니다.


이주의 메시지는 응답이 유효하지 않아 브라우저에 의해 삭제 된 경우에도 발생합니다.

필자의 경우 요청이 서버로 올바르게 전송 된 후 서버 측 코드에서 오류가 발생했으며 사용자 지정 오류 처리에서 HTTP 상태 메시지 필드에 오류 메시지가 반환되었습니다. 그러나 오류 메시지의 유효하지 않은 문자 (여기 http://aspnetwebstack.codeplex.com/workitem/1386 ) 로 인해 클라이언트 측에서이 오류가 수신되지 않아 응답 헤더가 손상되었습니다.


나는 결코 완료되지 않을 AJAX 호출 로이 문제에 부딪쳤다. 필자 는 페이지에서 chrome://net-internals다른 click이벤트 핸들러를 결정 하여 부모 노드에서 수신 대기하면서 브라우저가 동일한 URL을 탐색하게 만드는 디버깅에 대한 wvega의 조언과 팁을 따랐습니다 (따라서 눈에 띄지 않습니다).

이 솔루션은 추가했다 event.stopPropagation()A의 clickDOM을 품어하고 (A를 통해 시작된 진행중인 AJAX 요청을 취소에서 클릭을 유지하기 위해 버튼을 제출 양식에 핸들러 submit온 핸들러 form).


AJAX 호출을 서버로 보내고 최근에 "주의 : 임시 헤더가 표시됩니다."라는 메시지가 최근에 나타납니다. 서버 측 PHP 스크립팅에는 주어진 시나리오에 따라 거의 즉각적이거나 몇 초가 걸릴 수있는 MySQL 쿼리가 있습니다. 쿼리가 완료 될 때까지 서버 응답이 브라우저로 다시 전송되지 않습니다. 시간이 많이 걸리는 쿼리 (총 몇 초까지)가 완료되고 응답이 다시 전송되지 않는 경우에만이 오류가 발생했습니다.

내 시나리오는 날씨 모델 출력을 위해 수백 개의 열을 추가 / 제거하여 테이블을 변경 해야하는 매우 드문 가능성을 포함하므로 응답이 ALTER TABLE 쿼리 루프를 반복하여 지연됩니다.


이 문제가 발생하는 일반적인 이유는 이벤트를 추적하고 기본 조치를 막지 않기 때문입니다. 예를 들어 클릭 이벤트가있는 경우 다음을 포함 시키려고합니다.

e.preventDefault();

또는

return false;

그렇지 않으면 웹 콘솔의 네트워크 탭에 임시 헤더 경고와 "취소됨"상태가 표시됩니다.


내 경우에는 리소스에 대한 잘못된 설정 경로 (svg / img)


이 문제는 잘못된 HTTP 인증 헤더를 보낼 때 발생했습니다. base64로 인코딩하는 것을 잊었습니다.


나는 이것을 가로 질러 https에서 http로 전환했을 때 사라졌습니다. 우리가 dev에서 사용하는 SSL 인증서는 타사에서 확인하지 않습니다. 그들은 단지 로컬로 생성 된 개발자 인증서입니다.

Chrome Canary 및 Firefox에서도 동일한 통화가 정상적으로 작동합니다. 이 브라우저는 Chrome만큼 SSL 인증서에 대해 엄격한 것으로 보이지 않습니다. Chrome에서 '주의 : 임시 헤더 ...'메시지와 함께 호출이 실패합니다.

우리는 합법적 SSL 인증서를 무대와 제품에서 사용할 때 더 이상 Chrome 에서이 동작을 보지 않을 것이라고 생각합니다.


오류로 인해 변경을 한 후 main.js를 요구 js에 대해 두 번째로로드하려고 할 때이 문제를 실행했습니다. 방금 개발자 도구 설정 "캐시 비활성화 (DevTools가 열려있을 때)"에서 켰습니다. 그리고 그 매력을했다.


내가 본 또 다른 가능한 시나리오-정확히 동일한 요청이 몇 밀리 초 후에 다시 전송됩니다 (대부분 클라이언트 측의 버그로 인해).
이 경우 첫 번째 요청의 상태가 "취소됨"이며 대기 시간이 몇 밀리 초에 불과하다는 것을 알 수 있습니다.


다운로드 링크가있을 때이 문제가 발생했습니다. 클릭하면 jquery로 클릭을 잡고 아약스 요청을 보내려고했습니다. 문제는 다운로드 링크를 클릭 할 때 페이지가 보이지 않더라도 페이지를 떠나기 때문입니다. 파일 전송이 없으면 요청 된 페이지가 표시됩니다. 따라서이 문제를 방지하기 위해 target = "_ blank"를 설정했습니다.


팝업으로 페이지를 인쇄하려고 할 때이 오류가 발생했습니다. 인쇄 대화 상자가 표시되었지만 마스터 페이지에서 팝업에서 인쇄 승인 또는 취소를 계속 기다리고 있습니다. 주의 다른 헤더 를 클릭하려고 할 때 주의 임시 헤더가 표시 됩니다.

필자의 경우 해결책은 인쇄 대화 상자를 방지하기 위해 팝업 창에서 window.print ();실행중인 스크립트 를 제거 하는 것이 었습니다 <body>.


내 서버에 대한 연결 수가 Chrome의 서버 당 최대 연결 수 한도 인 6을 초과 한 경우이 문제가 발생했습니다.


다음 코드 코드를 사용하십시오.

header('Cache-Control: no-cache, no-store, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');

이것은 나를 위해 작동합니다.


그냥 내 두 센트에 던져. CORS 요청과 완전한 RESTful 웹 서비스를 사용하여 웹 응용 프로그램을 작성 중입니다. 처리되지 않은 예외가 있거나 PHP 오류가 발생하면 크롬 에서이 오류가 발생한다는 것을 알았습니다. 다른 사람이 문제를 겪을 수 있습니다. 이 일이 발생하면 Chrome 앱 "Postman-Rest Client"를 시작하고 정확히 동일한 요청을 실행할 수 있지만 Chrome 앱에서 실제로이 비 설명 적 오류 대신 PHP 오류가 발생합니다.


다른 해결책이 있습니다.

$ ajax () 호출에서이 문제가 발생하면 http://serverhost가 문제를 해결하기 전에 추가 하십시오.

var requestURL = "http://" + serverHost;
$.ajax({
    dataType: "json",
    url: requestURL,
    data: data,
    success: success    
});

Asp.Net Mvc 애플리케이션을 개발 중이고 JsonResult컨트롤러에서 를 리턴하려는 JsonRequestBehavior.AllowGet경우 Json메소드에 추가 해야합니다 . 그것은 나를 위해 그것을 고쳤다.

public JsonResult GetTaskSubCategories(int id)
{
    var subcategs = FindSubCategories(id);

    return Json(subcategs, JsonRequestBehavior.AllowGet);  //<-- Notice it has two parameters
}

HTTPS에 호스팅 된 웹 사이트가 HTTP에 호스팅 된 WebApi에 대한 호출을 호출 할 때 "주의 : 임시 헤더가 표시됨"메시지가 표시 될 수 있습니다. 모든 Api가 HTTPS인지 모두 확인할 수 있습니다. 브라우저가 안전하지 않은 리소스를 호출하지 못합니다. FETCH API를 사용하여 HTTP로 도메인화할 때 코드에서 유사한 메시지를 볼 수 있습니다.

혼합 컨텐츠 : ' https://website.com ' 의 페이지가 HTTPS를 통해로드되었지만 안전하지 않은 자원 ' http://webapi.com '을 요청했습니다 . 이 요청은 차단되었습니다. 콘텐츠는 HTTPS를 통해 제공되어야합니다.


MEAN 앱과 비슷한 문제가있었습니다. 제 경우에는 단 하나의 get 요청에서만 문제가 발생했습니다. 애드 블록을 제거하고 캐시를 지우고 다른 브라우저로 시도했습니다. 아무것도 도와주지 않았다.

마지막으로 API가 거대한 JSON 객체를 반환하려고한다는 것을 알았습니다. 작은 물건을 보내려고했을 때 정상적으로 작동했습니다. 마지막으로 JSON 대신 버퍼를 반환하도록 구현을 변경했습니다.

이 경우 expressJS가 오류를 발생시키기를 바랍니다.


이 문제는 일부 패키지를 사용 webpack-hot-middleware하고 동시에 여러 페이지를 열 때에도 발생 합니다. webpack-hot-middleware코드 변경 사항을 듣고 페이지를 새로 고치기 위해 각 페이지에 대한 연결을 만듭니다. 각 브라우저에는 max-connections-per-server6 개의 Chrome 제한이 있으므로 Chrome에서 이미 6 개 이상의 페이지를 연 경우 일부 페이지를 닫을 때까지 새 요청이 중단됩니다.


제 경우에는 AdBlock 확장이 원인이었습니다.

서버에 대한 요청이 진행되어 응답을 받았지만 Dev 도구에 "Provisional headers .."가 표시되어 요청 쿠키를 볼 수 없습니다. 사이트에서 AdBlock을 사용 중지하면 경고가 사라지고 개발 도구가 쿠키를 다시 표시하기 시작했습니다.

변경 사항을 적용하려면 개발 도구를 닫고 페이지를 새로 고쳐야했습니다.

참고 URL : https://stackoverflow.com/questions/21177387/caution-provisional-headers-are-shown-in-chrome-debugger



반응형