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

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

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

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

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

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

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

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

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

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

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

요청이 취소되지 않도록 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 리디렉션에 대해 잘못된 "위치"헤더를 반환했습니다. 물론 크롬은 이것을 말하지 못했습니다. 파이어 폭스에서 페이지를 열고 즉시 문제를 발견했습니다. 여러 도구를 사용하는 것이 좋습니다 :)

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

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

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에서 변경된 것이 있는지 모르겠습니다.

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

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

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

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

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

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

어깨를 으쓱하다

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

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

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

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

<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은 요청을 자동으로 취소하여 초보자가 자신과 같은 웹 개발에 대한 단서를 남기지 않았습니다. 안드로이드 폰을 사용하여 인증서를 다운로드하여 설치하면 문제가 사라집니다.

Angular (2+)에 내장 된 것과 같은 Observable 기반 HTTP 요청을 사용하는 경우 Observable이 취소되면 HTTP 요청을 취소 할 수 있습니다 (RxJS 6 switchMap연산자를 사용 하여 스트림을 결합 할 때 일반적 임) . 대부분의 경우 mergeMap요청을 완료하려면 대신 연산자 를 사용하는 것으로 충분합니다 .

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

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

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

스타일 시트에 웹 글꼴을 포함시킬 때 woff , woff2 , ttf 뿐만 아니라 모든 유형의 글꼴을 포함했습니다. 최근 woff2 가 있을 때 Chrome에서 ttf 및 woff에 대한 요청을 취소하는 것으로 나타났습니다 . 현재 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으로 업데이트 한 후 요청을 취소하기 시작했습니다.

레코드를 업데이트 할 때도 같은 문제가있었습니다. save () 내에서 양식에서 가져온 원시 데이터를 데이터베이스 형식과 일치시키기 위해 준비하고 있었고 (열거 값을 많이 매핑하는 등), 이것은 put 요청을 간헐적으로 취소합니다. save ()에서 데이터 프리 핑을 꺼내고 전용 dataPrep () 메서드를 만들어서 해결했습니다. 이 dataPrep을 비동기로 바꾸고 모든 메모리 집약적 데이터 변환을 기다립니다. 그런 다음 준비된 데이터를 http put 클라이언트에서 사용할 수있는 save () 메서드로 반환합니다. put 메소드를 호출하기 전에 dataPrep ()를 기다리고 있는지 확인했습니다.

await dataToUpdate = await dataPrep (); http.put (apiUrl, dataToUpdate);

이것은 간헐적 인 요청 취소를 해결했습니다.

축을 사용하면 도움이 될 수 있습니다

// change timeout delay: instance.defaults.timeout = 2500;

https://github.com/axios/axios#config-order-of-precedence