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

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

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?

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.

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>

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 :)

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.

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.

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.

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 :)

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/

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.

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

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é.

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!

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.

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.

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

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.

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({

     ...
    });

})

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.

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é.

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.

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.

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

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

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.

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

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

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.

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.

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.

Si vous utilisez axios, cela peut vous aider

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

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