Programing

Chrome 개발자 도구에서 리소스에 대한 상태 = 취소 란 무엇입니까?

lottogame 2020. 2. 29. 13:32
반응형

Chrome 개발자 도구에서 리소스에 대한 상태 = 취소 란 무엇입니까?


페이지가 취소되는 원인은 무엇입니까? Chrome 개발자 도구의 스크린 샷이 있습니다.

취소 된 자원

이것은 종종 발생하지만 항상 그런 것은 아닙니다. 다른 리소스가 캐시되면 페이지를 새로 고치면 LeftPane.aspx가로드됩니다. 실제로 이상한 점은 Internet Explorer 8이 아닌 Chrome에서만 발생한다는 것입니다. Chrome이 요청을 취소하는 이유는 무엇입니까?


우리는 Chrome이 프레임이나 iframe 내에 물건을로드하라는 요청을 취소하는 것과 비슷한 문제를 겪었지만 간헐적으로 만 컴퓨터 및 / 또는 인터넷 연결 속도에 의존하는 것처럼 보였습니다.

이 정보는 몇 달 전부터 사용되지 않았지만 처음부터 Chromium을 구축하고 소스를 파고 요청이 취소 될 수있는 모든 위치를 찾은 다음 디버그 할 모든 중단 점을 찾아 냈습니다. 메모리에서 Chrome이 요청을 취소하는 유일한 장소는 다음과 같습니다.

  • 요청이 발생한 DOM 요소가 삭제되었습니다 (즉, IMG를로드하는 중이지만로드가 발생하기 전에 IMG 노드를 삭제했습니다)
  • 데이터로드를 불필요하게 만든 작업을 수행했습니다. (즉, iframe 로딩을 시작한 다음 src를 변경하거나 내용을 덮어 씁니다)
  • 동일한 서버로 전송되는 요청이 많으며 이전 요청의 네트워크 문제로 인해 후속 요청이 작동하지 않는 것으로 나타났습니다 (DNS 조회 오류, 이전 (같은) 요청으로 인해 HTTP 400 오류 코드 등).

우리의 경우에는 최종적으로 대상 프레임이로드되기 전에 발생했던 다른 프레임에 HTML을 추가하려고 한 프레임으로 추적했습니다. iframe의 내용을 터치하면 더 이상 리소스를로드 할 수 없으므로 (어디에 넣을 위치를 알 수 있습니까?) 요청을 취소합니다.


status = 취소는 JavaScript 이벤트에 대한 ajax 요청에서도 발생할 수 있습니다.

<script>
  $("#call_ajax").on("click", function(event){
     $.ajax({
        ...    
     });
  });
</script>

<button id="call_ajax">call</button> 

이벤트가 요청을 성공적으로 보내지 만 취소 된 다음 서버에서 처리됩니다. 그 이유는 동일한 클릭 이벤트에서 아약스 요청을하더라도 요소가 클릭 이벤트에서 양식을 제출하기 때문입니다.

요청이 취소되지 않도록 JavaScript event.preventDefault (); 전화해야합니다 :

<script>
  $("#call_ajax").on("click", function(event){
     event.preventDefault();
     $.ajax({
        ...    
     });
  });
</script>

주의 : 포장 양식 요소 가 없는지 확인하십시오 .

onclick = {} 버튼이 양식 요소로 래핑되는 비슷한 문제가 있습니다. 버튼을 클릭하면 양식도 제출되고 모든 것이 엉망이되었습니다 ...

이 답변은 아마 아무도 읽지 못할 것입니다.하지만 왜 쓰지 않습니까? :)


주의해야 할 또 다른 사항은 AdBlock 확장 또는 일반적으로 확장 일 수 있습니다.

그러나 많은 사람들이 AdBlock을 가지고 있습니다 ....

확장 프로그램을 배제하려면 시크릿에서 새 탭을 열어 테스트하려는 확장 영역에 대해 "시크릿 허용"이 해제되어 있는지 확인하십시오.


"X-Frame-Options"헤더 태그를 확인할 수 있습니다. SAMEORIGIN 또는 DENY로 설정된 경우 사양에 따라 Chrome (및 기타 브라우저)에서 iFrame 삽입을 취소합니다 .

또한 일부 브라우저는 ALLOW-FROM 설정을 지원하지만 Chrome은 지원하지 않습니다.

이 문제를 해결하려면 "X-Frame-Options"헤더 태그를 제거해야합니다. 이를 통해 클릭 재킹 공격에 노출 될 수 있으므로 위험이 무엇인지, 어떻게 완화해야하는지 결정해야합니다.


필자의 경우 요청이 500ms를 초과하면 크롬이 요청을 취소하도록 jquery 전역 시간 초과 설정, jquery 플러그인 설정 전역 시간 초과 500ms로 나타났습니다.


서버에서 302 리디렉션에 대해 잘못된 "위치"헤더를 반환했습니다. 물론 크롬은 이것을 말하지 못했습니다. 파이어 폭스에서 페이지를 열고 즉시 문제를 발견했습니다. 여러 도구를 사용하는 것이 좋습니다 :)


iframe 내 별도 도메인의 보안 페이지와 비보안 페이지간에 리디렉션 할 때 취소 된 요청이 발생했습니다. 리디렉션 된 요청은 개발 도구에서 "취소 된"요청으로 표시되었습니다.

결제 게이트웨이에서 호스팅하는 양식이 포함 된 iframe이있는 페이지가 있습니다. iframe의 양식을 제출하면 결제 게이트웨이가 내 서버의 URL로 다시 리디렉션됩니다. 최근에 리디렉션이 작동을 멈추고 대신 "취소 된"요청으로 종료되었습니다.

Chrome (Windows 7 Chrome 30.0.1599.101을 사용하고 있음)은 더 이상 iframe 내의 리디렉션이 별도의 도메인의 비보안 페이지로 이동하는 것을 허용하지 않은 것 같습니다. 문제를 해결하기 위해 iframe의 리디렉션 된 요청이 항상 보안 URL로 전송되도록했습니다.

iframe 만있는 간단한 테스트 페이지를 만들 때 콘솔에 경고가 표시되었습니다 (이전에 놓쳤거나 표시되지 않았 음).

[Blocked] The page at https://mydomain.com/Payment/EnterDetails ran insecure content from http://mydomain.com/Payment/Success

PC, Mac 및 Android의 Chrome에서 리디렉션이 취소 된 요청으로 바뀌 었습니다. 내 웹 사이트 설정 (SagePay Low Profile)과 관련된 것인지 Chrome에서 변경된 것이 있는지 모르겠습니다.


(canceled)상태가 발생한 또 다른 장소는 특정 TLS 인증서 구성 오류입니다. https://www.example.com인증서에 포함되지 않았지만 www.유효한 사이트 가 잘못 구성된 https://example.com경우 Chrome은이 요청을 취소하고 후자의 사이트로 자동 리디렉션합니다. 입니다 하지 파이어 폭스의 경우.

현재 유효한 예 : https://www.pthree.org/


로컬 호스트를 가리키는 모바일 에뮬레이션을 사용하는 경우 Chrome 버전 33.0.1750.154 m은 지속적으로 이미지로드를 취소합니다 . 특히 사용자 에이전트 스푸핑 을 사용하는 경우 (단, 화면 설정).

사용자 에이전트 스푸핑을 끄면 이미지 요청이 취소되지 않았습니다. 이미지가 표시됩니다.

나는 아직도 왜 그런지 이해하지 못한다. 전자의 경우 요청이 취소 된 경우 요청 헤더 (주의 : 임시 헤더가 표시됨) 만

  • 동의하기
  • 캐시 제어
  • 프라 그마
  • 리퍼러
  • 사용자 에이전트

후자의 경우, 모든 사람들과 다른 사람들은 다음과 같습니다.

  • 쿠키
  • 연결
  • 주최자
  • 수락 인코딩
  • 언어를 받아들이십시오

어깨를 으쓱하다


제 경우에는 클릭 이벤트가있는 앵커가 있습니다.

<a href="" onclick="somemethod($index, hour, $event)">

내부 클릭 이벤트에서 네트워크 호출이 발생하여 Chrome에서 요청을 취소했습니다. 앵커는 수단을 가지고 href있으며 ""페이지를 다시로드하며 취소 된 네트워크 호출로 클릭 이벤트가있는 시간과 같습니다. 내가 href같은 것을 void로 바꿀 때마다

<a href="javascript:void(0)" onclick="somemethod($index, hour, $event)">

문제가 사라졌습니다!


다음은 크롬에서 요청을 취소 한 또 다른 경우입니다.

간단히 말해
자체 서명 된 인증서는 내 안드로이드 전화에서 신뢰할 수 없습니다.

세부 사항
우리는 개발 / 디버그 단계에 있습니다. URL이 자체 서명 된 호스트를 가리키고 있습니다. 코드는 다음과 같습니다

location.href = 'https://some.host.com/some/path'

Chrome은 요청을 자동으로 취소하여 초보자가 문제를 해결할 웹 개발에 대한 단서를 남기지 않았습니다. 안드로이드 폰을 사용하여 인증서를 다운로드하여 설치하면 문제가 사라집니다.


내 주요 CSS 폴더 외부의 다른 폴더에 저장된 두 개의 CSS 파일과 똑같은 내용이있었습니다. Expression Engine을 사용하고 있는데 문제가 내 htaccess 파일의 규칙에 있음을 발견했습니다. 방금 내 조건 중 하나에 폴더를 추가하고 수정했습니다. 예를 들면 다음과 같습니다.

RewriteCond %{REQUEST_URI} !(images|css|js|new_folder|favicon.ico)

따라서 잠재적 충돌이 있는지 htaccess 파일을 확인하는 것이 좋습니다.


자바 스크립트를 통해 리디렉션 할 때 Chrome에서이 오류가 발생했습니다.

<script>
    window.location.href = "devhost:88/somepage";
</script>

보시다시피 'http : //'를 잊어 버렸습니다 . 추가 한 후에 효과가있었습니다.


스타일 시트에 웹 글꼴을 포함시킬 때 woff , woff2 , ttf 뿐만 아니라 모든 유형의 글꼴을 포함했습니다. 최근 woff2있을 때 Chrome에서 ttfwoff에 대한 요청을 취소하는 것으로 나타났습니다 . 현재 Chrome 버전 66.0.3359.181을 사용하고 있지만 Chrome에서 추가 글꼴 유형을 취소하기 시작한시기는 확실하지 않습니다.


이 문제 <button>는 js에서 아약스 요청을 보내야하는 형식의 태그 가 있습니다. 그러나이 요청은 브라우저로 인해 취소 button되어 양식 내부를 클릭 할 때 자동으로 양식을 보냅니다 .

따라서 button일반 div또는 span페이지 대신 실제로 사용 하고 양식 throw js를 보내려면 preventDefault함수 로 리스너를 설정해야 합니다.

예 :

$('button').on('click', function(e){

    e.preventDefault();

    //do ajax
    $.ajax({

     ...
    });

})

전화 할 때 나에게도 같은 일이 일어났다. $를 가진 js 파일. 아약스, 아약스 요청, 내가 한 일은 정상적으로 전화했다.


필자의 경우 전자 메일 클라이언트 창을 표시하는 코드로 인해 Chrome에서 이미지로드를 중지했습니다.

document.location.href = mailToLink;

$ (function () {...}) 대신 $ (window) .load (function () {...})으로 옮기는 데 도움이되었습니다.


이것은 내가 반환 거짓을 생략했을 때 취소 된 상태를 겪은 사람을 도울 수 있습니까? 양식에 제출하십시오. 이로 인해 ajax send 바로 다음에 제출 작업이 발생하여 현재 페이지를 덮어 썼습니다. 아래에 코드가 표시되며 끝에 중요한 반환 값은 false입니다.

$('form').submit(function() {

    $.validator.unobtrusive.parse($('form'));
    var data = $('form').serialize();
    data.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();

    if ($('form').valid()) {
        $.ajax({
            url: this.action,
            type: 'POST',
            data: data,
            success: submitSuccess,
            fail: submitFailed
        });
    }
    return false;       //needed to stop default form submit action
});

누군가에게 도움이되기를 바랍니다.


LoopbackJS에서 와서 차트 예제에 제공된 것과 같은 사용자 정의 스트림 방법을 사용하려는 사람. 을 사용 하여이 오류가 발생하여 상태가 취소 PersistedModel되는 기본 Model문제로 전환 eventsource했습니다.

다시, 이것은 루프백 API를위한 것입니다. 그리고 이것은 Google의 최고 답변이자 최고이기 때문에 나는 이것을 혼합하여 던질 것이라고 생각했습니다.


우리 코드의 어딘가에 동일한 문제가 발생했습니다.이 의사 코드는 다음과 같습니다.

  • iframe을 만들
  • iframe의 onload는 양식을 제출

  • 2 초 후 iframe을 제거하십시오

따라서 서버가 서버가 응답을 쓰고있는 iframe에 응답하는 데 2 ​​초 이상이 걸리면 제거되었지만 응답은 계속 작성되지만 iframe을 작성하지 않았으므로 크롬이 요청을 취소했습니다. 따라서 이것을 피하기 위해 응답이 끝난 후에 만 ​​iframe을 제거하거나 대상을 "_blank"로 변경할 수 있습니다. 따라서 이유 중 하나는 : 당신이 무언가를 쓰고있는 리소스 (내 경우에는 iframe)가 쓰기를 멈추기 전에 제거되거나 삭제되면 요청이 취소됩니다


나를 위해 '취소'상태는 파일이 존재하지 않았기 때문입니다. 크롬이 보이지 않는 이유가 이상합니다 404.


그것은 나에게 잘못된 길처럼 간단했습니다. 디버깅의 첫 단계는 ajax 등과 독립적으로 파일을로드 할 수 있는지 확인하는 것입니다.


요청이 추적 방지 플러그인에 의해 차단되었을 수 있습니다.


300 이미지를 배경 이미지로로드 할 때 발생했습니다. 첫 번째 시간이 초과되면 나머지는 모두 취소하거나 최대 동시 요청에 도달했다고 추측합니다. 한 번에 5 개씩 구현해야 함


XMLHttpRequest.abort () 가 코드 어딘가에서 호출 되었기 때문일 수 있습니다 .이 경우 요청은 cancelledChrome 개발자 도구 네트워크 탭에서 상태가됩니다.


필자의 경우 크롬 76 업데이트 이후에 시작되었습니다.

내 JS 코드의 일부 문제로 인해 window.location이 여러 번 업데이트되어 이전 요청이 취소되었습니다. 이전부터 문제가 있었지만 Chrome은 버전 76으로 업데이트 한 후 요청을 취소하기 시작했습니다.

참고 URL : https://stackoverflow.com/questions/12009423/what-does-status-canceled-for-a-resource-mean-in-chrome-developer-tools



반응형