Che cosa significa status = cancellato per una risorsa in Strumenti per gli sviluppatori di Chrome?

Cosa causerebbe la cancellazione di una pagina? Ho uno screenshot di Chrome Developer Tools.

Questo succede spesso ma non ogni volta. Sembra che una volta memorizzate nella cache alcune altre risorse, un aggiornamento della pagina caricherà il LeftPane.aspx. E ciò che è davvero strano è che ciò accade solo in Google Chrome, non in Internet Explorer 8. Qualche idea sul perché Chrome annulli una richiesta?

Abbiamo combattuto un problema simile in cui Chrome stava annullando le richieste di caricamento di oggetti all'interno di frame o iframe, ma solo in modo intermittente e sembrava dipendere dal computer e / o dalla velocità della connessione Internet.

Questa informazione è obsoleta di alcuni mesi, ma ho creato Chromium da zero, ho scavato nella fonte per trovare tutti i luoghi in cui le richieste potevano essere cancellate e ho schiaffeggiato punti di interruzione su tutti loro per eseguire il debug. Dalla memoria, gli unici posti in cui Chrome annullerà una richiesta:

• L'elemento DOM che ha causato la richiesta è stato cancellato (ovvero viene caricato un IMG, ma prima che avvenisse il caricamento, è stato eliminato il nodo IMG)
• Hai fatto qualcosa che ha reso superfluo il caricamento dei dati. (vale a dire che hai iniziato a caricare un iframe, quindi hai cambiato l'src o sovrascrivi il contenuto)
• Esistono molte richieste che vanno allo stesso server e un problema di rete su richieste precedenti ha mostrato che le richieste successive non funzionavano (errore di ricerca DNS, richiesta precedente (stessa) risultata, ad esempio codice di errore HTTP 400, ecc.)

Nel nostro caso, l'abbiamo finalmente rintracciato in un frame cercando di aggiungere HTML a un altro frame, cosa che a volte accadeva prima che il frame di destinazione venisse caricato. Una volta toccato il contenuto di un iframe, non può più caricare la risorsa al suo interno (come farebbe a sapere dove inserirlo?) In modo da annullare la richiesta.

status = cancellato può accadere anche su richieste Ajax su eventi JavaScript:

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

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

L'evento invia correttamente la richiesta, ma viene annullato (ma elaborato dal server). Il motivo è che gli elementi inviano moduli su eventi click, indipendentemente dal fatto che tu faccia richieste ajax sullo stesso evento click.

Per impedire la cancellazione della richiesta, JavaScript event.preventDefault (); deve essere chiamato:

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

NB: assicurarsi di non disporre di alcun elemento del modulo di avvolgimento .

Ho avuto un problema simile in cui il mio pulsante con onclick = {} è stato racchiuso in un elemento del modulo. Quando si fa clic sul pulsante viene inviato anche il modulo, che ha rovinato tutto ...

Questa risposta non sarà probabilmente mai letta da nessuno, ma ho pensato perché non scriverla :)

Un'altra cosa da cercare potrebbe essere l'estensione AdBlock, o estensioni in generale.

Ma "molte" persone hanno AdBlock ....

Per escludere le estensioni, apri una nuova scheda in incognito assicurandoti che "consenti in incognito sia disattivato" per le estensioni che desideri testare.

Potresti voler controllare il tag di intestazione "X-Frame-Options". Se impostato su SAMEORIGIN o DENY, l'inserimento di iFrame verrà annullato da Chrome (e altri browser) in base alle specifiche .

Inoltre, tieni presente che alcuni browser supportano l'impostazione ALLOW-FROM, ma Chrome no.

Per risolvere questo problema, dovrai rimuovere il tag di intestazione "X-Frame-Options". Questo potrebbe lasciarti aperto agli attacchi clickjacking, quindi dovrai decidere quali sono i rischi e come mitigarli.

Nel mio caso, ho scoperto che si tratta di impostazioni di timeout globali jquery, un timeout globale di installazione plug-in jquery a 500ms, in modo che quando la richiesta supera 500ms, Chrome annullerà la richiesta.

Ecco cosa mi è successo: il server stava restituendo un'intestazione "Posizione" non corretta per un reindirizzamento 302. Chrome non è riuscito a dirmi questo, ovviamente. Ho aperto la pagina in Firefox e ho immediatamente scoperto il problema. Bello avere più strumenti :)

Un altro posto in cui abbiamo riscontrato lo (canceled)stato è in una particolare configurazione errata del certificato TLS. Se un sito come https://www.example.comconfigurato in modo errato in modo tale che il certificato non includa il www.ma è valido per https://example.com, Chrome annullerà questa richiesta e reindirizzerà automaticamente a quest'ultimo sito. Questo non è il caso di Firefox.

Esempio attualmente valido: https://www.pthree.org/

Una richiesta annullata mi è capitata durante il reindirizzamento tra pagine protette e non protette su domini separati all'interno di un iframe. La richiesta reindirizzata mostrata negli strumenti di sviluppo come una richiesta "annullata".

Ho una pagina con un iframe contenente un modulo ospitato dal mio gateway di pagamento. Quando è stato inviato il modulo nell'iframe, il gateway di pagamento reindirizzava a un URL sul mio server. Il reindirizzamento ha recentemente smesso di funzionare e alla fine è diventato una richiesta "annullata".

Sembra che Chrome (stavo usando Windows 7 Chrome 30.0.1599.101) non consentisse più a un reindirizzamento all'interno dell'iframe di passare a una pagina non sicura su un dominio separato. Per risolvere il problema, ho appena fatto in modo che tutte le richieste reindirizzate nell'iframe fossero sempre inviate a URL sicuri.

Quando ho creato una pagina di test più semplice con solo un iframe, c'era un avviso nella console (che in precedenza avevo perso o forse non avevo mostrato):

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

Il reindirizzamento si è trasformato in una richiesta annullata in Chrome su PC, Mac e Android. Non so se è specifico per la configurazione del mio sito Web (SagePay Low Profile) o se qualcosa è cambiato in Chrome.

La versione di Chrome 33.0.1750.154 m annulla costantemente i carichi di immagine se sto usando l' emulazione mobile puntata sul mio host locale; in particolare con User Agent spoofing su (vs solo le impostazioni dello schermo).

Quando disattivo lo spoofing dell'agente utente; le richieste di immagini non vengono cancellate, vedo le immagini.

Ancora non capisco perché; nel primo caso, in cui la richiesta viene annullata, le intestazioni di richiesta (ATTENZIONE: vengono visualizzate le intestazioni provvisorie)

• Accettare
• Cache-Control
• Pragma
• Referente
• User-Agent

In quest'ultimo caso, tutti quelli più altri come:

• biscotto
• Connessione
• Ospite
• Accept-Encoding
• Accept-Language

alzata di spalle

Ho ricevuto questo errore in Chrome quando ho reindirizzato tramite JavaScript:

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

Come vedi ho dimenticato "http: //" . Dopo averlo aggiunto, ha funzionato.

Per il mio caso, ho avuto un'ancora con evento click come

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

Nell'evento click interno ho ricevuto alcune chiamate di rete, Chrome ha annullato la richiesta. L'ancoraggio ha hrefcon ""mezzi, ricarica la pagina e allo stesso tempo ha l'evento click con chiamata di rete che viene annullata. Ogni volta che lo sostituisco hrefcon vuoto come

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

Il problema è andato via!

Ecco un altro caso di richiesta annullata da Chrome, che ho appena riscontrato, che non è coperto da nessuna delle risposte lassù.

In breve
Certificato autofirmato non attendibile sul mio telefono Android.

Dettagli
Siamo in fase di sviluppo / debug. L'URL punta a un host autofirmato. Il codice è come:

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

Chrome ha appena annullato la richiesta in silenzio, senza lasciare indizi per i principianti allo sviluppo web come me per risolvere il problema. Una volta scaricato e installato il certificato utilizzando il telefono Android, il problema è scomparso.

Se si utilizzano alcune richieste HTTP basate su Observable come quelle incorporate in Angular (2+), la richiesta HTTP può essere annullata quando viene osservato l'osservable (cosa comune quando si utilizza l' switchMapoperatore RxJS 6 per combinare i flussi) . Nella maggior parte dei casi è sufficiente mergeMapinvece utilizzare l' operatore, se si desidera completare la richiesta.

Ho avuto la stessa identica cosa con due file CSS che erano memorizzati in un'altra cartella fuori dalla mia cartella css principale. Sto usando Expression Engine e ho scoperto che il problema era nelle regole nel mio file htaccess. Ho appena aggiunto la cartella a una delle mie condizioni e l'ha riparata. Ecco un esempio:

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

Quindi potrebbe valere la pena controllare il file htaccess per eventuali conflitti

Ho incorporato tutti i tipi di font, nonché woff , woff2 , ttf quando ho incorporato un font web nel foglio di stile. Di recente ho notato che Chrome annulla la richiesta di ttf e woff quando è presente woff2 . Al momento utilizzo la versione 66.0.3359.181 di Chrome, ma non sono sicuro quando Chrome abbia iniziato a cancellare tipi di carattere aggiuntivi.

Abbiamo avuto questo problema con il tag <button>nel modulo, che avrebbe dovuto inviare una richiesta Ajax da js. Ma questa richiesta è stata annullata, a causa del browser, che invia automaticamente il modulo su qualsiasi clic buttonall'interno del modulo.

Quindi, se vuoi davvero usare al button posto del normale divo spansulla pagina e vuoi inviare un modulo lanciando js, ​​dovresti impostare un ascoltatore con la preventDefaultfunzione.

per esempio

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

    e.preventDefault();

    //do ajax
    $.ajax({

     ...
    });

})

mi è successo lo stesso quando ho chiamato a. file js con $. ajax, e fai una richiesta ajax, quello che ho fatto è stato chiamare normalmente.

Nel mio caso il codice per mostrare la finestra del client di posta elettronica ha causato l'interruzione del caricamento delle immagini da parte di Chrome:

document.location.href = mailToLink;

spostandolo in $ (window) .load (function () {...}) invece di $ (function () {...}) ha aiutato.

In questo può aiutare chiunque mi sia imbattuto nello stato cancellato quando ho lasciato il ritorno falso; nel modulo invia. Ciò ha fatto sì che l'invio ajax fosse immediatamente seguito dall'azione di invio, che ha sovrascritto la pagina corrente. Il codice è mostrato sotto, con l'importante ritorno false alla fine.

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

Spero che aiuti qualcuno.

Per chiunque provenga da LoopbackJS e tenti di utilizzare il metodo di flusso personalizzato come indicato nell'esempio del grafico. Stavo ottenendo questo errore utilizzando un PersistedModel, passando a un Modelproblema di base risolto il mio problema di eventsourceannullamento dello stato.

Ancora una volta, questo è specificamente per l'API di loopback. E dal momento che questa è una risposta in alto e in alto su google ho pensato che avrei buttato questo nel mix di risposte.

Avevo affrontato lo stesso problema, da qualche parte nel profondo del nostro codice avevamo questo pseudocodice:

• crea un iframe

• caricamento di iframe inviare un modulo

• Dopo 2 secondi, rimuovere l'iframe

pertanto, quando il server impiega più di 2 secondi per rispondere all'iframe sul quale stava scrivendo la risposta, il server è stato rimosso, ma la risposta doveva ancora essere scritta, ma non vi era alcun iframe da scrivere, quindi Chrome ha annullato la richiesta, quindi, per evitare ciò, mi sono assicurato che l'iframe fosse rimosso solo dopo che la risposta fosse finita, oppure puoi cambiare la destinazione in "_blank". Quindi uno dei motivi è: quando la risorsa (nel mio caso iframe) in cui stai scrivendo qualcosa, viene rimossa o eliminata prima di interrompere la scrittura, la richiesta verrà annullata

Per me lo stato "cancellato" era perché il file non esisteva. Strano il motivo per cui Chrome non viene visualizzato 404.

Per me è stato semplice come un percorso sbagliato. Vorrei suggerire che il primo passo nel debug sarebbe vedere se è possibile caricare il file indipendentemente da Ajax ecc.

Le richieste potrebbero essere state bloccate da un plug-in di protezione del monitoraggio.

Mi è successo quando ho caricato 300 immagini come immagini di sfondo. Immagino che una volta scaduto il primo, abbia annullato tutto il resto o raggiunto la massima richiesta simultanea. necessità di implementare un 5 alla volta

Uno dei motivi potrebbe essere che XMLHttpRequest.abort () è stato chiamato da qualche parte nel codice, in questo caso la richiesta avrà lo cancelledstato nella scheda Rete degli strumenti di sviluppo di Chrome.

Nel mio caso, ha iniziato a venire dopo l'aggiornamento di Chrome 76.

A causa di qualche problema nel mio codice JS, window.location veniva aggiornato più volte e ciò ha comportato l'annullamento della richiesta precedente. Sebbene il problema fosse presente da prima, Chrome ha iniziato a cancellare la richiesta dopo l'aggiornamento alla versione 76.

Ho avuto lo stesso problema durante l'aggiornamento di un record. All'interno di save () stavo preparando i dati grezzi presi dal modulo per abbinare il formato del database (facendo un sacco di mappatura dei valori degli enum, ecc.), E questo a intermittenza annullava la richiesta put. l'ho risolto estraendo i dati preimpostati da save () e creando un metodo dataPrep () dedicato da esso. Ho trasformato questi datiPrep in asincrono e attendo tutta la conversione dei dati ad alta intensità di memoria. Quindi restituisco i dati preparati al metodo save () che potrei usare nel client http put. Mi sono assicurato di attendere su dataPrep () prima di chiamare il metodo put:

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

Ciò ha risolto l'annullamento intermittente della richiesta.

Se usi axios può aiutarti

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

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