debugginghttpgoogle-chromedeveloper-toolsweb-developer-toolbar

Reputation: 24610

What does status=canceled for a resource mean in Chrome Developer Tools?

What would cause a page to be canceled? I have a screenshot of the Chrome Developer Tools.

Canceled Resource

This happens often but not every time. It seems like once some other resources are cached, a page refresh will load the LeftPane.aspx. And what's really odd is this only happens in Google Chrome, not Internet Explorer 8. Any ideas why Chrome would cancel a request?

Upvotes: 522

Answers (30)

fuco

Reputation: 962

status=canceled may happen also on ajax requests on JavaScript events:

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

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

The event successfully sends the request, but is is canceled then (but processed by the server). The reason is, the elements submit forms on click events, no matter if you make any ajax requests on the same click event.

To prevent request from being cancelled, JavaScript event.preventDefault(); has to be called:

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

Upvotes: 80

guest381

Reputation: 185

In my case I had timeout into axios instance

const axios = axios.create({
    baseURL: process.env.REACT_APP_API_URL,
    timeout: requestTimeout,
});

Upvotes: 1

stianlp

Reputation: 1019

NB: Make sure you don't have any wrapping form elements.

I had a similar issue where my button with onclick={} was wrapped in a form element. When clicking the button the form is also submitted, and that messed it all up...

Upvotes: 50

Alex Mercer

Reputation: 19

in strict point of view of Angular :

it happens when, you're not able to properly break at the code level.

suppose, request1 is out, and its response also came, after that, nested request2 also went out and its response also came, and directly we're breaking out of the loop, without properly destroying the subscription of request1,

at that time, it happens

Upvotes: 0

Jon B

Reputation: 81

Content Security Policy headers for me! You can quickly rule out this possibility by checking the Chrome Dev Tools Console, if it's CSP problems there will be errors showing in the console. In .Net you can fix this either by adding headers in the web.config file or in code.

Refused to send form data to 'https://www.mysite.mydomain/' because it violates the following Content Security Policy directive: "form-action 'self' *.otherdomain www.thirdparty.co.uk".

Here's the web.config fix for the above error:

<cspConfiguration>
        <directives>
            <directive name="form-action" allowedSources="'self' *.mydomain>
            </directive>
        </directives>
</cspConfiguration>

Upvotes: 0

Thomas C. G. de Vilhena

Reputation: 14565

In my case the cause of the problem was yet another one.

My application is sitting behind a proxy, and Chrome requests were being sent with the If-Modified-Since HTTP header. When this header is present the exepcted behavior is:

the server will send back the requested resource, with a 200 status, only if it has been last modified after the given date. If the request has not been modified since, the response will be a 304 without any body;

The Proxy was failing to meet this expectation, responding with a 304 status code but a non-empty body, thus causing the request to be cancelled.

After fixing the proxy behavior requests worked like a charm.

Upvotes: 0

Panu Haaramo

Reputation: 2932

I had an a tag inside a div tag. div had onclick="location='http://mydestination.org/'" and a tag had the same URL in href. That caused the target page to be loaded two times and the first load was canceled by Chrome.

Upvotes: 1

Daniel Kucal

Reputation: 9232

If you make use of some Observable-based HTTP requests like those built-in in Angular (2+), then the HTTP request can be canceled when observable gets canceled (common thing when you're using RxJS 6 switchMap operator to combine the streams). In most cases it's enough to use mergeMap operator instead, if you want the request to complete.

Upvotes: 5

zemil

Reputation: 5066

If you use axios it can help you

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

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

Upvotes: 5

meol

Reputation: 1033

I had the same issue when updating a record. Inside the save() i was prepping the rawdata taken from the form to match the database format (doing a lot of mapping of enums values, etc), and this intermittently cancels the put request. i resolved it by taking out the data prepping from the save() and creating a dedicated dataPrep() method out of it. I turned this dataPrep into async and await all the memory intensive data conversion. I then return the prepped data to the save() method that i could use in the http put client. I made sure i await on dataPrep() before calling the put method:

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

This solved the intermittent cancelling of request.

Upvotes: 0

Vishal

Reputation: 445

In my case, it started coming after chrome 76 update.

Due to some issue in my JS code, window.location was getting updated multiple times which resulted in canceling previous request. Although the issue was present from before, chrome started cancelling request after update to version 76.

Upvotes: 0

Aleksandr

Reputation: 2321

One the reasons could be that the XMLHttpRequest.abort() was called somewhere in the code, in this case, the request will have the cancelled status in the Chrome Developer tools Network tab.

Upvotes: 0

AwokeKnowing

Reputation: 8206

It happened to me when loading 300 images as background images. I'm guessing once first one timed out, it cancelled all the rest, or reached max concurrent request. need to implement a 5-at-a-time

Upvotes: 0

Nathan

Reputation: 5329

The requests might have been blocked by a tracking protection plugin.

Upvotes: 0

bestOfSong

Reputation: 81

Here is another case of request being canceled by chrome, which I just encountered, which is not covered by any of answers up there.

In a nutshell
Self-signed certificate not being trusted on my android phone.

Details
We are in development/debug phase. The url is pointing to a self-signed host. The code is like:

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

Chrome just canceled the request silently, leaving no clue for newbie to web development like myself to fix the issue. Once I downloaded and installed the certificate using the android phone the issue is gone.

Upvotes: 4

Denis Matafonov

Reputation: 2802

We had this problem having tag <button> in the form, that was supposed to send ajax request from js. But this request was canceled, due to browser, that sends form automatically on any click on button inside the form.

So if you realy want to use button instead of regular div or span on the page, and you want to send form throw js - you should setup a listener with preventDefault function.

e.g.

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

    e.preventDefault();

    //do ajax
    $.ajax({

     ...
    });

})

Upvotes: 3

Tasnim Reza

Reputation: 6060

For my case, I had an anchor with click event like

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

Inside click event I had some network call, Chrome cancelling the request. The anchor has href with "" means, it reloads the page and the same time it has click event with network call that gets cancelled. Whenever i replace the href with void like

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

The problem went away!

Upvotes: 3

Cameron

Reputation: 1015

It was as simple as an incorrect path for me. I would suggest the first step in debugging would be to see if you can load the file independently of ajax etc.

Upvotes: 0

Ali Sheikhpour

Reputation: 11055

I have embedded all types of font as well as woff, woff2, ttf when I embed a web font in style sheet. Recently I noticed that Chrome cancels request to ttf and woff when woff2 is present. I use Chrome version 66.0.3359.181 right now but I am not sure when Chrome started canceling of extra font types.

Upvotes: 2

FreeLightman

Reputation: 2294

For me 'canceled' status was because the file did not exist. Strange why chrome does not show 404.

Upvotes: 0

William Budington

Reputation: 430

Another place we've encountered the (canceled) status is in a particular TLS certificate misconfiguration. If a site such as https://www.example.com is misconfigured such that the certificate does not include the www. but is valid for https://example.com, chrome will cancel this request and automatically redirect to the latter site. This is not the case for Firefox.

Currently valid example: https://www.pthree.org/

Upvotes: 8

ESP32

Reputation: 8718

I got this error in Chrome when I redirected via JavaScript:

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

As you see I forgot the 'http://'. After I added it, it worked.

Upvotes: 4

Hiresh

Reputation: 89

I had faced the same issue, somewhere deep in our code we had this pseudocode:

create an iframe
onload of iframe submit a form
After 2 seconds, remove the iframe

thus, when the server takes more than 2 seconds to respond the iframe to which the server was writing the response to, was removed, but the response was still to be written , but there was no iframe to write , thus chrome cancelled the request, thus to avoid this I made sure that the iframe is removed only after the response is over, or you can change the target to "_blank". Thus one of the reason is: when the resource(iframe in my case) that you are writing something in, is removed or deleted before you stop writing to it, the request will be cancelled

Upvotes: 2

NodeDad

Reputation: 1537

For anyone coming from LoopbackJS and attempting to use the custom stream method like provided in their chart example. I was getting this error using a PersistedModel, switching to a basic Model fixed my issue of the eventsource status cancelling out.

Again, this is specifically for the loopback api. And since this is a top answer and top on google i figured i'de throw this in the mix of answers.

Upvotes: 0

whamma

Reputation: 8328

We fought a similar problem where Chrome was canceling requests to load things within frames or iframes, but only intermittently and it seemed dependent on the computer and/or the speed of the internet connection.

This information is a few months out of date, but I built Chromium from scratch, dug through the source to find all the places where requests could get cancelled, and slapped breakpoints on all of them to debug. From memory, the only places where Chrome will cancel a request:

The DOM element that caused the request to be made got deleted (i.e. an IMG is being loaded, but before the load happened, you deleted the IMG node)
You did something that made loading the data unnecessary. (i.e. you started loading a iframe, then changed the src or overwrite the contents)
There are lots of requests going to the same server, and a network problem on earlier requests showed that subsequent requests weren't going to work (DNS lookup error, earlier (same) request resulted e.g. HTTP 400 error code, etc)

In our case we finally traced it down to one frame trying to append HTML to another frame, that sometimes happened before the destination frame even loaded. Once you touch the contents of an iframe, it can no longer load the resource into it (how would it know where to put it?) so it cancels the request.

Upvotes: 754

Jon P Smith

Reputation: 2439

In can this helps anybody I came across the cancelled status when I left out the return false; in the form submit. This caused the ajax send to be immediately followed by the submit action, which overwrote the current page. The code is shown below, with the important return false at the end.

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

Hope that helps someone.

Upvotes: 1

Nicolai Shestakov

Reputation: 90

In my case the code to show e-mail client window caused Chrome to stop loading images:

document.location.href = mailToLink;

moving it to $(window).load(function () {...}) instead of $(function () {...}) helped.

Upvotes: 1

Nate Anderson

Reputation: 21074

Chrome Version 33.0.1750.154 m consistently cancels image loads if I am using the Mobile Emulation pointed at my localhost; specifically with User Agent spoofing on (vs. just Screen settings).

When I turn User Agent spoofing off; image requests aren't canceled, I see the images.

I still don't understand why; in the former case, where the request is cancelled the Request Headers (CAUTION: Provisional headers are shown) have only

Accept
Cache-Control
Pragma
Referer
User-Agent

In the latter case, all of those plus others like:

Cookie
Connection
Host
Accept-Encoding
Accept-Language

Shrug

Upvotes: 4

Phil M

Reputation: 995

A cancelled request happened to me when redirecting between secure and non-secure pages on separate domains within an iframe. The redirected request showed in dev tools as a "cancelled" request.

I have a page with an iframe containing a form hosted by my payment gateway. When the form in the iframe was submitted, the payment gateway would redirect back to a URL on my server. The redirect recently stopped working and ended up as a "cancelled" request instead.

It seems that Chrome (I was using Windows 7 Chrome 30.0.1599.101) no longer allowed a redirect within the iframe to go to a non-secure page on a separate domain. To fix it, I just made sure any redirected requests in the iframe were always sent to secure URLs.

When I created a simpler test page with only an iframe, there was a warning in the console (which I had previous missed or maybe didn't show up):

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

The redirect turned into a cancelled request in Chrome on PC, Mac and Android. I don't know if it is specific to my website setup (SagePay Low Profile) or if something has changed in Chrome.

Upvotes: 6

James Kyburz

Reputation: 14453

Another thing to look out for could be the AdBlock extension, or extensions in general.

But "a lot" of people have AdBlock....

To rule out extension(s) open a new tab in incognito making sure that "allow in incognito is off" for the extention(s) you want to test.

Upvotes: 16

What does status=canceled for a resource mean in Chrome Developer Tools?

Answers (30)

Related Questions