Que signifie status = cancelled pour une ressource dans Chrome Developer Tools?

402

Qu'est-ce qui entraînerait l'annulation d'une page? J'ai une capture d'écran des outils de développement Chrome.

Ressource annulée

Cela arrive souvent mais pas à chaque fois. Il semble qu'une fois que d'autres ressources sont mises en cache, une actualisation de page chargera le LeftPane.aspx. Et ce qui est vraiment étrange, c'est que cela ne se produit que dans Google Chrome, pas Internet Explorer 8. Des idées pourquoi Chrome annulerait une demande?

styfle
la source
13
Vous pourrez peut-être obtenir plus de détails à partir d'une trace net-internals . J'ai eu un problème similaire et j'ai trouvé dans mon cas que l'annulation était net::ERR_ABORTEDsous les couvertures. Si tel est le cas, ce message explique que "net :: ERR_ABORTED est destiné à être généré uniquement lorsqu'une action utilisateur provoque l'interruption d'une charge. Cela peut se produire lorsqu'une nouvelle navigation interrompt une navigation existante, ou lorsque l'utilisateur clique sur STOP bouton."
John McCarthy
Merci. Dans mon cas, ce n'est pas l'utilisateur parce que je suis l'utilisateur. La page contient (trop) de nombreux cadres. Peut-être que le cadre src est changé? C'est juste étrange que je ne l'ai jamais vu arriver dans IE. Je vais regarder les net-internals.
styfle
@ nondescript1 J'ai fait la capture lors de la reproduction du bogue et jeté dans un fichier. J'ai maintenant un fichier json de 18 000 lignes. Que cherche-je?
styfle
3
Honnêtement, je ne sais pas. En fait, je suis tombé sur votre question lorsque je cherchais plus d'informations sur status = m'a annulé, c'est la raison pour laquelle j'ajoute uniquement des commentaires et pas une réponse;). Je n'ai aucune raison de penser que c'est lié à la mise en cache. Je suis plus méfiant vis-à-vis d'une autre navigation initiée par quelqu'un dans la page. Lorsque j'ai vu cela, j'essayais de lancer un téléchargement avec window.open () qui a provoqué l'annulation d'une autre demande de serveur. Dans mon cas, Firefox n'a pas eu ce problème, mais Chrome l'a fait.
John McCarthy
1
Juste pour que cela ne va pas sans dire, une cause possible de "(annulé)" dans la colonne d'état - mais certainement pas la seule cause possible - est que l'URL telle qu'elle est donnée a renvoyé une erreur 404 ou autre. Actualisez de force l'URL dans un autre onglet plusieurs fois pour vous assurer qu'elle se charge de manière cohérente.
rakslice

Réponses:

592

Nous avons combattu un problème similaire où Chrome annulait les demandes de chargement de choses dans des cadres ou des iframes, mais uniquement de manière intermittente et cela semblait dépendre de l'ordinateur et / ou de la vitesse de la connexion Internet.

Ces informations sont obsolètes depuis quelques mois, mais j'ai construit Chromium à partir de zéro, j'ai fouillé la source pour trouver tous les endroits où les demandes pourraient être annulées et j'ai giflé des points d'arrêt sur chacun d'eux pour le déboguer. De mémoire, les seuls endroits où Chrome annulera une demande:

  • L'élément DOM à l'origine de la demande a été supprimé (c'est-à-dire qu'un IMG est en cours de chargement, mais avant le chargement, vous avez supprimé le nœud IMG)
  • Vous avez fait quelque chose qui a rendu le chargement des données inutile. (c'est-à-dire que vous avez commencé à charger un iframe, puis changé le src ou écrasé le contenu)
  • Il y a beaucoup de requêtes allant sur le même serveur, et un problème de réseau sur les requêtes précédentes a montré que les requêtes suivantes ne fonctionneraient pas (une erreur de recherche DNS, une requête (identique) antérieure a résulté par exemple un code d'erreur HTTP 400, etc.)

Dans notre cas, nous l'avons finalement retracé jusqu'à une image en essayant d'ajouter HTML à une autre image, ce qui arrivait parfois avant même que l'image de destination ne soit chargée. Une fois que vous touchez le contenu d'un iframe, il ne peut plus y charger la ressource (comment saurait-il où le placer?), Il annule donc la demande.

whamma
la source
2
Très instructif, merci. J'ai du mal à reproduire ce bug car une fois que les choses sont mises en cache, cela ne se produit pas. Si vous définissez un point d'arrêt dans mon javascript, cela ne se produit pas. Votre premier point n'est probablement pas le problème car je ne vois pas d'élément supprimé. Je sais pertinemment que ce n'est pas la puce 3. Que voulez-vous dire par "Une fois que vous touchez le contenu d'un iframe, il ne peut plus y charger la ressource"? Pouvez-vous donner un exemple?
styfle
1
Intéressant. J'ai donc besoin de trouver tous les document.writes dans ce cadre et de m'assurer qu'ils n'écrivent que lorsque le cadre est chargé. Je vais marquer cela comme la bonne réponse puisque vous avez répondu à la signification de ce statut.
styfle
3
@styfle Oui, mais cela peut aussi être autre chose que document.write. Tout ce qui essaie d'écrire dans le cadre comme appendChild ou similaire provoquerait probablement cela. Vous voudrez peut-être créer un gestionnaire onLoad dans chaque cadre qui écrit truedans une variable, puis les autres cadres le rechercheront avant de toucher quoi que ce soit.
whamma
14
J'ai également eu d'horribles problèmes avec cela. Une chose que j'ai trouvée qui déclenche systématiquement cela si la réponse AJAX a un code d'état 301/302 et que l'URL de redirection se trouve sur un autre domaine. C'est une reproduction cohérente du problème pour moi.
eb80
1
Pour moi, c'était l'iframe qui s'ajoutait au corps, puis immédiatement retiré du corps. J'ai mis un saut de ligne et le problème n'était pas là. Mettez donc un certain délai (15 ms) et surmontez-le. @whamma, c'est vraiment motivant la façon dont vous avez abordé le problème. Merci pour ces excellents détails. :-)
muhammed basil
53

status = cancelled peut se produire également sur les requêtes ajax sur les événements JavaScript:

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

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

L'événement envoie la demande avec succès, mais il est ensuite annulé (mais traité par le serveur). La raison en est que les éléments soumettent des formulaires sur les événements de clic, peu importe si vous faites des demandes ajax sur le même événement de clic.

Pour empêcher l'annulation de la demande, JavaScript event.preventDefault (); doivent être appelés:

<script>
  $("#call_ajax").on("click", function(event){
     event.preventDefault();
     $.ajax({
        ...    
     });
  });
</script>
fuco
la source
3
Cela m'a sauvé, c'était le problème dans mon cas où j'ai utilisé des angulaires ng-clicksur un bouton avec type="submit"puis j'ai fait du réseautage dans la fonction appelée. Chrome a continué d'annuler cette demande ...
Robin
1
Malheureusement, cela ne fonctionne pas pour moi. D'autres indices?
Krzysztof Madej
Vaov m'a sauvé aussi! Pour un événement ng-click angulaire, j'avais imbriqué des requêtes $ http et la seconde était en cours d'annulation. Après avoir défini la ligne par défaut, il a recommencé à fonctionner, merci.
Bahadir Tasdemir
Merci pour cela. Je savais que ce n'était pas un problème CORS ou DOM. Peut-être que @whamma pourrait mettre à jour sa réponse pour l'inclure comme cause possible d'exhaustivité :)
glidester
Salut au seigneur !! Monsieur, vous êtes un génie absolu !! J'ai été sauvé !!
Dilnoor Singh
25

NB: assurez-vous de ne pas avoir d'éléments de formulaire d'habillage .

J'ai eu un problème similaire où mon bouton avec onclick = {} était enveloppé dans un élément de formulaire. En cliquant sur le bouton, le formulaire est également soumis, et cela a tout gâché ...

Cette réponse ne sera probablement jamais lue par personne, mais je me suis dit pourquoi ne pas l'écrire :)

stianlp
la source
C'était la cause première pour moi - un bouton a déclenché le POST deux fois. Je ne voulais pas déplacer le bouton hors de l'élément de formulaire à cause de choses CSS, donc c'était la solution: stackoverflow.com/questions/932653/…
Nikolai Koudelia
Même problème. Pour clarifier, j'avais un bouton contenu dans un formulaire avec un type de soumission, mais j'avais un onclick qui faisait une soumission de formulaire jquery, ajax submit. Cela a fonctionné dans FF, mais a échoué dans chome et IE, et m'a rendu fou jusqu'à ce que je le trouve.
ChrisThompson
Cela corrige un problème qui m'est arrivé dans une application Vue.js où un @clickévénement était lié à un <button>élément à l'intérieur d'un wrapper de formulaire. Évitez de le faire, sauf si vous utilisez le @submit.preventmodificateur d'événement de Vue .
Paul Wenzel
Ce fut le cas pour moi. En ajoutant un type="button"à mon étiquette de bouton, le formulaire n'a pas été envoyé et l'événement annulé a été évité.
Brandon Medenwald
12

Une autre chose à rechercher pourrait être l'extension AdBlock, ou les extensions en général.

Mais "beaucoup" de gens ont AdBlock ....

Pour exclure les extensions, ouvrez un nouvel onglet en mode navigation privée en vous assurant que «autoriser la navigation privée est désactivée» pour les extensions que vous souhaitez tester.

James Kyburz
la source
Exactement ce qui s'est passé. Activé le plugin noscript et soudainement iFrame ne se chargeait plus.
Margus Pala
Pour moi, c'était le plugin Hola. Après la désactivation, les demandes ne sont plus annulées.
Lénine Raj Rajasekaran
1
Dans mon cas, il s'agissait de l'extension chrome "JavaScript Errors Notifier"
Alex
J'ai essayé de tout regarder et toujours pas de chance avec Angular 8, désactivé toutes les extensions et toujours sur le réseau 3G lent, les appels précédents sont annulés. :(
born2net
10

Vous voudrez peut-être vérifier la balise d'en-tête "X-Frame-Options". S'il est défini sur SAMEORIGIN ou DENY, l'insertion d'iFrame sera annulée par Chrome (et d'autres navigateurs) conformément aux spécifications .

Notez également que certains navigateurs prennent en charge le paramètre AUTORISER, mais pas Chrome.

Pour résoudre ce problème, vous devrez supprimer la balise d'en-tête "X-Frame-Options". Cela pourrait vous laisser ouvert aux attaques de détournement de clics , vous devrez donc décider quels sont les risques et comment les atténuer.

Justin Cloud
la source
C'était exactement mon problème. Ce fil a de bonnes réponses sur la façon de le réparer: stackoverflow.com/questions/6666423/…
ToniTornado
8

Dans mon cas, j'ai trouvé qu'il s'agit de paramètres de délai global jquery, un délai global de configuration du plugin jquery à 500 ms, de sorte que lorsque la demande dépasse 500 ms, Chrome annule la demande.

limodou
la source
Rencontrant le même problème. Dans mon cas, il s'agit d'un développement WordPress / WooCommerce local avec un serveur invité VirtualBox, et certaines demandes AJAX WooCommerce ont un délai AJAX prédéfini de 5000 ms. Si quelqu'un rencontre le même problème, ce délai est défini dans le includes/class-wc-frontend-scripts.phpfichier.
Ivan Shatsky
7

Voici ce qui m'est arrivé: le serveur renvoyait un en-tête «Location» mal formé pour une redirection 302. Chrome n'a pas réussi à me le dire, bien sûr. J'ai ouvert la page dans Firefox, et j'ai immédiatement découvert le problème. Agréable d'avoir plusieurs outils :)

Jared Forsyth
la source
Bien que très évidente quant à la raison, mais quand même, c'est en fait une réponse très utile. J'étais en train d'éditer un vieux code coffeescript, et j'avais complètement oublié que les guillemets simples ne faisaient pas l' #{}interpolation, donc l'URL résultante était mal formée. Mais Chrome ne m'en a rien dit.
kumarharsh
4

Un autre endroit où nous avons rencontré l' (canceled)état est dans une mauvaise configuration particulière du certificat TLS. Si un site tel que https://www.example.commal configuré est tel que le certificat n'inclut pas le www.mais est valide pour https://example.com, Chrome annulera cette demande et redirigera automatiquement vers ce dernier site. Ce n'est pas le cas pour Firefox.

Exemple actuellement valide: https://www.pthree.org/

William Budington
la source
pouvez-vous simplement rediriger d'un domaine sans certificat vers un domaine certifié? de nu à www? ou vous voyez toujours l'annulation ou l'erreur de certificat?
Konstantin Vahrushev
3

Une demande annulée m'est arrivée lors de la redirection entre des pages sécurisées et non sécurisées sur des domaines distincts au sein d'une iframe. La demande redirigée s'est affichée dans les outils de développement comme une demande "annulée".

J'ai une page avec un iframe contenant un formulaire hébergé par ma passerelle de paiement. Lorsque le formulaire dans l'iframe a été soumis, la passerelle de paiement redirigeait vers une URL sur mon serveur. La redirection a récemment cessé de fonctionner et s'est transformée en demande "annulée" à la place.

Il semble que Chrome (j'utilisais Windows 7 Chrome 30.0.1599.101) n'autorisait plus une redirection dans l'iframe pour accéder à une page non sécurisée sur un domaine distinct. Pour y remédier, je me suis juste assuré que toutes les demandes redirigées dans l'iframe étaient toujours envoyées à des URL sécurisées.

Lorsque j'ai créé une page de test plus simple avec seulement un iframe, il y avait un avertissement dans la console (que j'avais précédemment manqué ou peut-être pas apparu):

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

La redirection s'est transformée en une demande annulée dans Chrome sur PC, Mac et Android. Je ne sais pas si cela est spécifique à la configuration de mon site Web (SagePay Low Profile) ou si quelque chose a changé dans Chrome.

Phil M
la source
Je vois un comportement presque identique dans Chrome 30 lors de l'utilisation des services de paiement hébergés par Datacash, mais dans mon cas, le POST du site 3dsecure au site Datacash est annulé, bien que les deux soient https. Cela s'avère être un mystère.
Jason
2

La version Chrome 33.0.1750.154 m annule systématiquement les chargements d'images si j'utilise l' émulation mobile pointée vers mon hôte local; spécifiquement avec l'usurpation de l'agent utilisateur sur (contre seulement Paramètres écran).

Lorsque je désactive l'usurpation de l'agent utilisateur; les demandes d'images ne sont pas annulées, je vois les images.

Je ne comprends toujours pas pourquoi; dans le premier cas, où la demande est annulée, les en-têtes de demande (ATTENTION: les en-têtes provisoires sont affichés)

  • J'accepte
  • Cache-Control
  • Pragma
  • Referer
  • Agent utilisateur

Dans ce dernier cas, tous ceux et d'autres comme:

  • Biscuit
  • Connexion
  • Hôte
  • Accepter-encodage
  • Accept-Language

Hausser les épaules

Le pois rouge
la source
2

J'ai eu cette erreur dans Chrome lorsque j'ai redirigé via JavaScript:

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

Comme vous le voyez, j'ai oublié le 'http: //' . Après l'avoir ajouté, cela a fonctionné.

Gerfried
la source
2

Pour mon cas, j'avais une ancre avec un événement de clic comme

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

Événement de clic interne J'ai eu un appel réseau, Chrome a annulé la demande. L'ancre dispose hrefde ""moyens, elle recharge la page et en même temps elle a un événement click avec appel réseau qui est annulé. Chaque fois que je remplace le hrefvide comme

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

Le problème a disparu!

Tasnim Reza
la source
2

Voici un autre cas de demande d'annulation par Chrome, que je viens de rencontrer, qui n'est couvert par aucune des réponses là-haut.

En un mot
certificat auto-signé n'est pas approuvé sur mon téléphone Android.

Détails
Nous sommes en phase de développement / débogage. L'URL pointe vers un hôte auto-signé. Le code est comme:

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

Chrome vient d'annuler la demande en silence, ne laissant aucun indice pour les débutants au développement Web comme moi pour résoudre le problème. Une fois que j'ai téléchargé et installé le certificat à l'aide du téléphone Android, le problème a disparu.

bestOfSong
la source
2

Si vous utilisez certaines requêtes HTTP basées sur l'Observable comme celles intégrées dans Angular (2+), alors la requête HTTP peut être annulée lorsque l'observable est annulée (chose courante lorsque vous utilisez l' switchMapopérateur RxJS 6 pour combiner les flux) . Dans la plupart des cas, il suffit d'utiliser l' mergeMapopérateur à la place, si vous souhaitez que la demande se termine.

Daniel Kucal
la source
1

J'ai eu exactement la même chose avec deux fichiers CSS qui ont été stockés dans un autre dossier en dehors de mon dossier CSS principal. J'utilise Expression Engine et j'ai découvert que le problème était dans les règles de mon fichier htaccess. Je viens d'ajouter le dossier à l'une de mes conditions et il l'a corrigé. Voici un exemple:

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

Il peut donc être utile de vérifier votre fichier htaccess pour tout conflit potentiel

gelviis
la source
1

J'ai intégré tous les types de polices ainsi que woff , woff2 , ttf lorsque j'incorpore une police Web dans une feuille de style. Récemment, j'ai remarqué que Chrome annule la demande de ttf et woff lorsque woff2 est présent. J'utilise Chrome version 66.0.3359.181 en ce moment, mais je ne sais pas quand Chrome a commencé à annuler les types de police supplémentaires.

Ali Sheikhpour
la source
1

Nous avons eu ce problème avec la balise <button>dans le formulaire, qui était censée envoyer une demande ajax à partir de js. Mais cette demande a été annulée, en raison du navigateur, qui envoie automatiquement le formulaire à tout clic sur l' buttonintérieur du formulaire.

Donc, si vous voulez vraiment utiliser button au lieu de régulier divou spansur la page, et que vous voulez envoyer des jets de formulaire - vous devez configurer un écouteur avec preventDefaultfonction.

par exemple

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

    e.preventDefault();

    //do ajax
    $.ajax({

     ...
    });

})
Denis Matafonov
la source
0

m'est arrivé la même chose en appelant a. fichier js avec $. ajax, et faire une demande ajax, ce que j'ai fait était d'appeler normalement.

Mario Gonzales Flores
la source
0

Dans mon cas, le code pour afficher la fenêtre du client de messagerie a empêché Chrome de charger les images:

document.location.href = mailToLink;

le déplacer vers $ (window) .load (function () {...}) au lieu de $ (function () {...}) a aidé.

Nicolai Shestakov
la source
0

Cela peut aider toute personne dont je suis tombé sur le statut annulé lorsque j'ai omis le retour faux; dans le formulaire soumettre. Cela a causé l'envoi ajax immédiatement suivi de l'action d'envoi, qui a écrasé la page actuelle. Le code est illustré ci-dessous, avec le retour important faux à la fin.

$('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
});

J'espère que cela aide quelqu'un.

Jon P Smith
la source
0

Pour toute personne venant de LoopbackJS et essayant d'utiliser la méthode de flux personnalisé comme indiqué dans leur exemple de graphique. J'obtenais cette erreur en utilisant un PersistedModel, en passant à une base Modelfixe mon problème deeventsource annulation d'état.

Encore une fois, c'est spécifiquement pour l'api de bouclage. Et comme il s'agit d'une bonne réponse et de Google, je me suis dit que je jetterais cela dans le mélange de réponses.

NodeDad
la source
0

J'avais rencontré le même problème, quelque part au fond de notre code, nous avions ce pseudocode:

  • créer un iframe
  • onload of iframe soumettre un formulaire

  • Après 2 secondes, retirez l'iframe

ainsi, lorsque le serveur met plus de 2 secondes pour répondre, l'iframe à laquelle le serveur écrivait la réponse a été supprimée, mais la réponse devait encore être écrite, mais il n'y avait pas d'iframe à écrire, donc chrome a annulé la demande, ainsi pour éviter cela, je me suis assuré que l'iframe n'est supprimé qu'après la réponse, ou vous pouvez changer la cible en "_blank". Ainsi, l'une des raisons est la suivante: lorsque la ressource (iframe dans mon cas) dans laquelle vous écrivez quelque chose, est supprimée ou supprimée avant de cesser d'y écrire, la demande sera annulée

Hiresh
la source
0

Pour moi, le statut «annulé» était dû au fait que le fichier n'existait pas. Étrange pourquoi le chrome ne s'affiche pas 404.

FreeLightman
la source
0

C'était aussi simple qu'un chemin incorrect pour moi. Je suggérerais que la première étape du débogage serait de voir si vous pouvez charger le fichier indépendamment d'ajax, etc.

Cameron
la source
0

Les demandes peuvent avoir été bloquées par un plugin de protection de suivi.

Nathan
la source
0

Cela m'est arrivé lors du chargement de 300 images en tant qu'images d'arrière-plan. Je suppose qu'une fois que le premier a expiré, il a annulé tout le reste ou a atteint la demande simultanée maximale. besoin de mettre en œuvre un 5 à la fois

AwokeKnowing
la source
0

L'une des raisons pourrait être que XMLHttpRequest.abort () a été appelé quelque part dans le code, dans ce cas, la demande aura le cancelledstatut dans l'onglet Réseau des outils des développeurs Chrome.

Aleksandr Shumilov
la source
0

Dans mon cas, cela a commencé après la mise à jour de Chrome 76.

En raison d'un problème dans mon code JS, window.location était mis à jour plusieurs fois, ce qui entraînait l'annulation de la demande précédente. Bien que le problème soit présent auparavant, Chrome a commencé à annuler la demande après la mise à jour vers la version 76.

Vishal
la source
0

J'ai eu le même problème lors de la mise à jour d'un enregistrement. À l'intérieur de la sauvegarde (), je préparais les données brutes tirées du formulaire pour qu'elles correspondent au format de la base de données (faisant beaucoup de mappage des valeurs d'énumération, etc.), et cela annule par intermittence la demande de vente. Je l'ai résolu en retirant la préparation des données de save () et en créant une méthode dataPrep () dédiée. J'ai transformé ce dataPrep en async et j'attends toute la conversion de données gourmande en mémoire. Je renvoie ensuite les données préparées à la méthode save () que je pouvais utiliser dans le client http put. Je me suis assuré d'attendre sur dataPrep () avant d'appeler la méthode put:

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

Cela a résolu l'annulation intermittente de la demande.

meol
la source