web-dev-qa-db-fra.com

Que signifie statut = annulé pour une ressource dans les outils de développement Chrome?

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

Canceled Resource

Cela arrive souvent mais pas à chaque fois. Il semble qu'une fois d'autres ressources mises en cache, une actualisation de la page chargera le fichier LeftPane.aspx. Et ce qui est vraiment étrange, c'est que cela ne se produit que dans Google Chrome, pas dans Internet Explorer 8. Avez-vous une idée de la raison pour laquelle Chrome annulerait une demande?

debugginghttpgoogle-chromedeveloper-toolsweb-developer-toolbar
313
styfle

Nous nous sommes battus contre un problème similaire dans lequel Chrome annulait les demandes de chargement d'éléments dans des cadres ou des iframes, mais seulement par intermittence et cela semblait dépendre de l'ordinateur et/ou de la vitesse de la connexion Internet.

Ces informations sont périmées depuis quelques mois, mais j’ai construit Chromium à partir de rien, fouillé dans la source pour trouver tous les endroits où les demandes pouvaient être annulées et claqué des points d’arrêt sur chacun d’eux pour les corriger. 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 noeud IMG).
  • Vous avez fait quelque chose qui a rendu inutile le chargement des données. (c.-à-d. que vous avez commencé à charger un iframe, puis à changer le src ou à écraser le contenu)
  • Il y a beaucoup de demandes qui vont au même serveur, et un problème de réseau sur les demandes précédentes a montré que les demandes suivantes ne fonctionnaient pas (une erreur de recherche DNS, une demande précédente (identique) résultait par exemple d'un code d'erreur HTTP 400, etc.)

Dans notre cas, nous avons finalement trouvé un cadre qui essayait d’ajouter du HTML à un autre cadre, ce qui se produisait parfois avant même que le cadre de destination ne soit chargé. Une fois que vous avez touché le contenu d'un iframe, il ne peut plus y charger la ressource (comment peut-il savoir où le placer?), De sorte qu'il annule la demande.

472
whamma

status = annulé peut se produire également sur les demandes 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 avec succès la demande, mais est annulé ensuite (mais traité par le serveur). La raison en est que les éléments soumettent des formulaires à des é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>
33
fuco

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

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

Pour exclure une ou plusieurs extensions, ouvrez un nouvel onglet dans incognito en vous assurant que "l’autorisation d’incognito est désactivée" pour les extensions que vous souhaitez tester.

10
James Kyburz

Vous voudrez peut-être vérifier la balise d'en-tête "X-Frame-Options". Si sa valeur est SAMEORIGIN ou DENY, l'insertion de iFrame sera annulée par Chrome (et les autres navigateurs) conformément au spec .

Notez également que certains navigateurs prennent en charge le paramètre ALLOW-FROM, mais que Chrome ne le fait pas.

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

10
Justin Cloud

NB: Assurez-vous de ne pas avoir aucun élément de formulaire enveloppant .

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

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

9
stianlp

Voici ce qui m'est arrivé: le serveur renvoyait un en-tête malformé "Emplacement" 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 tout de suite découvert le problème . C'est bien d'avoir plusieurs outils :)

6
Jared Forsyth

Dans mon cas, j’ai trouvé qu’il s’agissait de paramètres de délai d'expiration global jquery, un délai d'expiration global de configuration du plug-in jquery de 500 ms, de sorte que, lorsque la demande dépasse 500 ms, chrome annule la demande.

6
limodou

Une demande annulée m'est arrivée lors d'une 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 apparaît dans les outils de développement en tant que demande "annulée".

J'ai une page avec un iframe contenant un formulaire hébergé par ma passerelle de paiement. Lorsque le formulaire de l'iframe était soumis, la passerelle de paiement était redirigée vers une URL sur mon serveur. La redirection a récemment cessé de fonctionner et a abouti à une requête "annulée". 

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 située sur un domaine distinct. Pour résoudre ce problème, je me suis 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 uniquement un iframe, il y avait un avertissement dans la console (que j'avais précédemment manqué ou peut-être ne suis 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.

3
Phil M

Un autre endroit où nous avons rencontré le statut (canceled) est dans une mauvaise configuration de certificat TLS particulier. Si un site tel que https://www.example.com est mal configuré, de sorte que le certificat n'inclut pas le www. mais est valide pour https://example.com, chrome annulera cette demande et sera automatiquement redirigé vers ce dernier. C'est pas le cas pour Firefox.

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

3
William Budington

Chrome Version 33.0.1750.154 m annule systématiquement le chargement des images si j'utilise le Mobile Emulation pointé vers mon hôte local; spécifiquement avec l'usurpation de l'agent utilisateur sur (par opposition aux paramètres d'écran). 

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

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

  • Acceptez
  • Cache-Control
  • Pragma
  • Référant
  • Agent utilisateur

Dans ce dernier cas, tous ceux-ci, ainsi que d’autres comme:

  • Cookie
  • Lien
  • Hôte
  • Accepter l'encodage
  • Accepter la langue

Haussement d'épaules

2
The Red Pea

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 constaté que le problème se trouvait dans les règles de mon fichier htaccess. Je viens d'ajouter le dossier à l'une de mes conditions et cela a été corrigé. Voici un exemple:

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

Donc, il pourrait être utile de vérifier votre fichier htaccess pour tout conflit potentiel

1
gelviis

Pour mon cas, j’avais une ancre avec click event comme

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

À l'intérieur d'un événement de clic, j'ai eu un appel réseau, Chrome annulant la demande. L'ancre a href avec "" signifie, il recharge la page et le même temps qu'il a l'événement click avec l'appel réseau qui est annulé. Chaque fois que je remplace la href par vide comme

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

Le problème est parti!

1
Reza

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

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

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

1
Gerfried

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

1
Ali Sheikhpour

Voici un autre cas de requête annulée par chrome, que je viens de rencontrer et qui n’est couverte par aucune des réponses.

En un mot
Le certificat auto-signé n’est pas fiable 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 a simplement annulé la demande en silence, ne laissant aucun indice au débutant en 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.

1
bestOfSong

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

Donc, si vous voulez vraiment utiliser button au lieu de div ou span régulier sur la page, et que vous voulez envoyer un formulaire js, vous devez configurer un écouteur avec la fonction preventDefault.

par exemple.

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

    e.preventDefault();

    //do ajax
    $.ajax({

     ...
    });

})
1
Denis Matafonov

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 de ajax etc.

0
Cameron

Une des raisons pourrait être que XMLHttpRequest.abort () a été appelé quelque part dans le code. Dans ce cas, la demande aura le statut cancelled dans le Chrome. Outils de développement onglet Réseau.

0
Aleksandr Shumilov

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

En raison d'un problème dans mon code JS, window.location a été mis à jour plusieurs fois, ce qui a entraîné l'annulation de la requête précédente. Même si le problème existait auparavant, chrome a commencé à annuler la demande après la mise à jour vers la version 76.

0
Vishal

Les demandes ont peut-être été bloquées par un plugin de protection de suivi.

0
Nathan

En peut cela aide n'importe qui j'ai rencontré le statut annulé quand j'ai omis le retour faux; dans le formulaire soumettre. Cela a provoqué le suivi immédiat de l'envoi ajax par l'action d'envoi, qui a remplacé la page en cours. Le code est présenté 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 ça aide quelqu'un.

0
Jon P Smith

Dans mon cas, le code permettant d'afficher la fenêtre du client de messagerie entraînait l'arrêt du chargement des images dans Chrome:

document.location.href = mailToLink;

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

0
Nicolai Shestakov

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

0
FreeLightman

m'est arrivé pareil en appelant un. fichier js avec $. ajax, et faire une demande ajax, ce que j'ai fait était d'appeler normalement.

0
Mario Gonzales Flores

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 atteint le nombre maximal de demandes simultanées. besoin de mettre en œuvre un 5 à la fois

0
AwokeKnowing

Pour tous ceux qui viennent de LoopbackJS et essaient d'utiliser la méthode de flux personnalisée telle que fournie dans leur exemple de graphique. Je recevais cette erreur en utilisant un PersistedModel, le passage à un Model de base a résolu mon problème d'annulation du statut eventsource. 

Encore une fois, ceci est spécifiquement pour l'api de bouclage. Et comme il s’agit d’une excellente réponse sur Google, j’ai pensé que jetterais cela dans le mélange de réponses.

0
Aaron Russell

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

  • créer un iframe

  • onload d'iframe soumettre un formulaire 

  • Après 2 secondes, retirez l'iframe

ainsi, lorsque le serveur met plus de 2 secondes à répondre, l'iframe dans lequel il écrivait la réponse a été supprimé, mais la réponse devait encore être écrite, mais il n'y avait aucun iframe à écrire, ainsi chrome a annulé la demande, donc pour éviter cela, je me suis assuré que l’iframe n’est supprimé que lorsque la réponse est finie, ou vous pouvez remplacer la cible par "_blank" . L’une des raisons est donc: lorsque la ressource dans mon cas) que vous écrivez quelque chose dans, est supprimé ou supprimé avant que vous arrêtez d'écrire, la demande sera annulée

0
Hiresh