web-dev-qa-db-ja.com

Chromeデベロッパーツールでは、リソースに対してstatus = cancelledとはどういう意味ですか？

ページがキャンセルされる原因は何ですか？ Chromeデベロッパーツールのスクリーンショットがあります。

Canceled Resource

これは頻繁に起こりますが、毎回起こるわけではありません。他のリソースがキャッシュされると、ページを更新するとLeftPane.aspxがロードされます。そして、これがInternet Explorer 8ではなく、Google Chromeでのみ発生することが本当に奇妙なことです。Chromeがリクエストをキャンセルする理由は何ですか。

debugginghttpgoogle-chromedeveloper-toolsweb-developer-toolbar
331
styfle

Chromeがフレームやインラインフレーム内のものをロードするリクエストをキャンセルしていても、断続的にしか発生しないという同様の問題が発生しました。これはコンピュータやインターネット接続の速度に依存しているようです。

この情報は時代遅れですが、私はChromiumを最初から構築し、要求を取り消すことができる場所をすべて見つけるためにソースを掘り下げ、デバッグするためにそれらすべてにブレークポイントを当てました。メモリから、Chromeがリクエストをキャンセルする唯一の場所：

  • 要求の原因となったDOM要素が削除されました（つまり、IMGがロードされていますが、ロードが行われる前にIMGノードを削除しました）。
  • あなたはデータのロードを不要にする何かをしました。 （つまり、iframeのロードを開始してから、srcを変更するか、内容を上書きします）
  • 同じサーバーに送信されるリクエストが多数あり、以前のリクエストに関するネットワークの問題により、後続のリクエストが機能しないことが示されました（DNSルックアップエラー、以前の（同じ）リクエストはHTTP 400エラーコードなど）

私たちの場合は、ついにHTMLを別のフレームに追加しようとしている1つのフレームにたどり着きました。これは、宛先のフレームがロードされる前にも発生することがありました。 iframeの内容に触れると、それをリソースに読み込むことができなくなり（どこに配置すればわかりますか）、リクエストは取り消されます。

495
whamma

status = cancelledは、JavaScriptイベントに対するajaxリクエストでも発生する可能性があります。

<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>
39
fuco

注意： ラッピングフォーム要素がないことを確認してください 。

Onclick = {}のボタンがフォーム要素で囲まれているという同様の問題がありました。ボタンをクリックするとフォームも送信され、それがすべて混乱していました...

この答えはおそらく誰にも読まれないでしょうが、私はなぜそれを書かないのか考えました:)

10
stianlp

もう1つ注意が必要なのは、AdBlock拡張機能、または一般的な拡張機能です。

しかし、多くの人がAdBlockを持っています。

拡張子を除外するには、シークレットで新しいタブを開き、テストしたい拡張子に対して「シークレットを許可する」がオフになっていることを確認します。

10
James Kyburz

あなたは "X-Frame-Options"ヘッダタグをチェックしたいかもしれません。 SAMEORIGINまたはDENYに設定されている場合、iFrameの挿入は spec に従ってChrome（および他のブラウザ）によってキャンセルされます。

また、一部のブラウザはALLOW-FROM設定をサポートしていますが、Chromeはサポートしていません。

これを解決するには、 "X-Frame-Options"ヘッダータグを削除する必要があります。これにより、 クリックジャッキング攻撃にさらされる可能性があります そのため、リスクとは何か、それらを軽減する方法を決定する必要があります。

10
Justin Cloud

私の場合は、jqueryのグローバルタイムアウト設定、jqueryのプラグイン設定のグローバルタイムアウトを500msに設定しているため、リクエストが500msを超えるとchromeがリクエストをキャンセルします。

7
limodou

これが私に起こったことです：サーバーは302リダイレクトのために不正な "Location"ヘッダーを返していました。もちろんChromeはこれを教えてくれなかった。私はFirefoxでページを開くと、すぐに問題を発見しました。複数のツールがあるのはうれしい:)

6
Jared Forsyth

Iframe内の別々のドメインにある安全なページと安全でないページの間でリダイレクトするときに、キャンセルされたリクエストが私に起こりました。リダイレクトされたリクエストは「キャンセルされた」リクエストとしてdevツールに表示されました。

私のペイメントゲートウェイによってホストされているフォームを含む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で何かが変わったかどうかはわかりません。

3
Phil M

(canceled)ステータスに遭遇したもう1つの場所は、特定のTLS証明書の設定ミスです。証明書にhttps://www.example.comが含まれていないがwww.に対して有効であるようにhttps://example.comのようなサイトが誤って設定されている場合、chromeはこの要求をキャンセルして自動的に後者のサイトにリダイレクトします。これは ではない Firefoxの場合です。

現在有効な例： https://www.pthree.org/ /

3
William Budington

Chromeバージョン33.0.1750.154 mは、 Mobile Emulation を使用している場合は、ローカルホストを指している場合に一貫してイメージの読み込みをキャンセルします。具体的には ユーザエージェントのなりすましon（対単なる画面設定）。

ユーザーエージェントのなりすましを無効にした場合画像リクエストはキャンセルされません、画像が見えます。

理由はまだわかりません。リクエストがキャンセルされる前者の場合、リクエストヘッダー（注意：仮ヘッダーが表示されます）は

  • 受け入れる
  • キャッシュ制御
  • プラグマ
  • リファラー
  • ユーザーエージェント

後者の場合、それらすべてに加えて他のものが好きです：

  • Cookie
  • 接続
  • ホスト
  • 受け入れエンコード
  • 受け入れ言語

シュラグ

2
The Red Pea

私のメインのcssフォルダの外の別のフォルダに格納されている2つのCSSファイルについてもまったく同じことができました。 Expression Engineを使用していますが、問題はhtaccessファイルのルールにあることがわかりました。フォルダを自分の条件の1つに追加したところ、修正されました。これが例です：

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

そのため、htaccessファイルで競合の可能性があるかどうかをチェックする価値があります。

1
gelviis

私の場合は、クリックイベントのようなアンカーがあります。

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

クリックイベントの中で私はネットワークコールをしました、Chromeは要求をキャンセルしました。アンカーは""を持つhrefを持ち、ページをリロードし、同時にクリックイベントとネットワークコールがキャンセルされることを意味します。私はhrefをvoidのように置き換えるたびに

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

問題は解決しました！

1
Reza

私はJavaScript経由でリダイレクトしたとき、私はChromeでこのエラーを得ました：

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

ご覧のとおり 私は「http：//」を忘れました 。追加した後はうまくいきました。

1
Gerfried

スタイルシートにWebフォントを埋め込むときは、 woff 、 woff2 、 ttf のように、すべての種類のフォントを埋め込んでいます。最近、 woff2 が存在する場合、Chromeが ttf および woff へのリクエストをキャンセルすることに気付きました。現時点ではChromeバージョン66.0.3359.181を使用していますが、Chromeが余分なフォントタイプのキャンセルを開始した時期はわかりません。

1
Ali Sheikhpour

これは私が遭遇したクロムによって要求がキャンセルされたもう一つのケースです。

手短に
自己署名証明書が私のAndroid携帯電話で信頼されていません。

詳細
開発中/デバッグ中です。 URLは自己署名ホストを指しています。コードは次のとおりです。

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

Chromeは要求を黙ってキャンセルしたばかりなので、私のようなWeb開発の初心者が問題を解決する手がかりを残すことはできません。 Android携帯を使用して証明書をダウンロードしてインストールすると、問題は解消されます。

1
bestOfSong

Jsからajaxリクエストを送信することになっていたフォームにタグ<button>があるという問題がありました。しかし、ブラウザのため、フォーム内のbuttonをクリックすると自動的にフォームが送信されるため、このリクエストはキャンセルされました。

そのため、ページ上で通常のbuttonやdivの代わりにspanを使用したい場合、およびフォームthrow jsを送信したい場合 - preventDefault関数を使用してリスナーを設定する必要があります。

例えば.

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

    e.preventDefault();

    //do ajax
    $.ajax({

     ...
    });

})
1
Denis Matafonov

それは私にとって間違った道と同じくらい簡単でした。私はデバッグの最初のステップはあなたがajaxなどから独立してファイルをロードすることができるかどうか見ることであろうことを提案するでしょう.

0
Cameron

その理由の1つとして、コードのどこかで XMLHttpRequest.abort（） が呼び出されたことが考えられます。この場合、リクエストはChromeでcancelledステータスになります。開発者ツールの[ネットワーク]タブ。

0
Aleksandr Shumilov

私の場合、chrome 76アップデートの後に来ました。

JSコードの問題により、window.locationが複数回更新され、以前のリクエストがキャンセルされました。この問題は以前から存在していましたが、chromeはバージョン76への更新後にリクエストのキャンセルを開始しました。

0
Vishal

リクエストがトラッキングプロテクションプラグインによってブロックされている可能性があります。

0
Nathan

これは、私が返品をしなかったときにキャンセルされたステータスに遭遇した誰かに役立ちます。送信フォームに。これにより、ajax送信の直後に送信アクションが続き、現在のページが上書きされました。以下にコードを示します。最後に重要な戻り値を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
});

誰かに役立つことを願っています。

0
Jon P Smith

私の場合は、メールクライアントウィンドウを表示するコードによって、Chromeが画像の読み込みを停止していました。

document.location.href = mailToLink;

$（function（）{...}）の代わりに$（window）.load（function（）{...}）に移動することは助けになりました。

0
Nicolai Shestakov

私にとって「取り消された」状況は、ファイルが存在しなかったためです。なぜchromeが404を表示しないのか不思議です。

0
FreeLightman

を呼び出すときに私に同じことが起こった。 jsファイルと$。 ajax、そしてajaxリクエストをする、私がしたことは普通に呼ばれていた。

0
Mario Gonzales Flores

背景画像として300枚の画像を読み込むと、私に起こりました。最初のうち1つがタイムアウトした、それが残りのすべてをキャンセルした、または最大同時要求に達したと思います。一度に5つずつ実装する必要がある

0
AwokeKnowing

LoopbackJSから来て、チャートの例で提供されているようなカスタムストリームメソッドを使用しようとしている人のために。私はPersistedModelを使用してこのエラーを取得していました。基本的なModelに切り替えると、eventsourceステータスの問題が解消されました。

繰り返しますが、これは特にループバックAPI用です。そしてこれはトップの回答であり、Googleのトップであるので、私は答えを組み合わせてこれを投げることにしました。

0
Aaron Russell

私はこの疑似コードを持っていた私たちのコードのどこかで同じ問題に直面していました：

  • iframeを作成する

  • iframeのonloadフォームを送信する

  • 2秒後に、iframeを削除します

したがって、サーバーが応答を書き込んでいたiframeの応答に2秒以上かかる場合は削除されましたが、応答はまだ書き込まれていましたが、書き込むiframeがなかったため、クロムは要求を取り消しました。したがって、これを回避するために、応答が終了した後にのみiframeが削除されるようにするか、ターゲットを "_blank"に変更できます。その理由の1つは、次のとおりです。 書き込み中のリソース（私の場合はiframe）が、書き込みを停止する前に削除または削除された場合、要求はキャンセルされます

0
Hiresh