506

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?

9
  • 18
    You might be able to get more details from a net-internals trace. I had a similar issue and found in my case that canceled was net::ERR_ABORTED under the covers. If that's the case, this post explains that "net::ERR_ABORTED is intended to only be generated when a user action causes a load to be interrupted. This can happen when a new navigation interrupts an existing one, or when the user clicks the STOP button." Aug 22, 2012 at 15:15
  • Thanks. In my case it's not the user because I am the user. The page does have (too) many frames. Maybe the frame src gets changed? It's just odd that I have never seen it happen in IE. I'll look into net-internals.
    – styfle
    Aug 22, 2012 at 16:41
  • @nondescript1 I did the capture while reproducing the bug and dumped to a file. Now I have a 18,000 line json file. What am I looking for?
    – styfle
    Aug 22, 2012 at 16:48
  • 3
    I honestly don't know. Actually came across your question when I was looking for more information on status=canceled myself, which is the reason why I'm only adding comments and not an answer ;). I have no reason to think it's related to caching. I'm more suspicious of another navigation initiated someone in the page. When I saw this, I was trying to initiate a download with window.open() that caused another server request to be canceled. In my case, Firefox didn't have this issue but Chrome did. Aug 24, 2012 at 17:02
  • 1
    Just so it doesn't go without saying, one possible cause of "(cancelled)" in the status column -- though definitely not the only possible cause -- is that the URL as given has returned a 404 or other error. Force-refresh the URL in another tab a few times to make sure it is loading consistently.
    – rakslice
    Aug 18, 2013 at 23:52

35 Answers 35

739
+100

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.

18
  • 3
    Very informative, thank you. I have a hard time reproducing this bug because once things get cached, it doesn't happen. If set a breakpoint in my javascript, it doesn't happen. Your first bullet point is probably not the problem because I don't see a element being deleted. I know for a fact it isn't bullet point 3. What do you mean by "Once you touch the contents of an iframe, it can no longer load the resource into it"? Can you give an example?
    – styfle
    Nov 19, 2012 at 18:11
  • 4
    @styfle Yes, but it can be things other than document.write, too. Anything that tries writing to the frame like appendChild or similar would likely cause this. You might want to create an onLoad handler in each frame that writes true to some variable, then other frames look for that first before touching anything.
    – whamma
    Nov 19, 2012 at 19:13
  • 26
    I have also had horrible problems with this. One thing that I have found that does consistently trigger this if the AJAX response has a status code 301/302 and the redirect URL is on another domain. This is a consistent reproduction of the problem for me.
    – eb80
    Oct 11, 2013 at 8:17
  • 4
    Just had this happen in a React app where the component that made the request got taken out of the DOM. Thanks for the help!
    – Mike Dane
    Jul 29, 2020 at 0:44
  • 3
    It's really terrifying thet you have to dig into the browser's source code to know why this is happening, especially because I see this almost every day in devtool. Are there no documentation or something like about this?
    – Herbertusz
    Feb 4, 2022 at 15:00
76

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>
6
  • 5
    This saved me, was the problem in my case where I used angular's ng-click on a button with type="submit" and then did some networking in the called function. Chrome kept canceling that request...
    – Robin
    Jan 6, 2015 at 13:36
  • 1
    Unfortunately it does not work for me. Any other hints? Jan 13, 2016 at 10:10
  • Vaov saved me too! For an angular ng-click event I had nested $http requests and second one was being canceled. After setting the prevent default line it started working again, thanks. Sep 20, 2016 at 15:03
  • Thanks for this. I knew it was not CORS or a DOM issue. Perhaps @whamma could update their answer to include this as possible cause for completeness :)
    – glidester
    Oct 20, 2017 at 11:15
  • Hail the lord !! Sir, you are an absolute genius !! I have been saved !! Feb 28, 2019 at 18:44
48

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

5
  • 1
    This was the root cause for me - a button triggered POST twice. I didn't want to move the button out of the form element because of CSS stuff so this was the solution: stackoverflow.com/questions/932653/… Jun 26, 2019 at 15:39
  • Same issue. To clarify, i had a button contained in a form with a type of submit, but had an onclick that was doing a jquery form submit, ajax submit. It worked in FF, but failed in chome and IE, and drove me nuts until i found it. Aug 13, 2019 at 13:04
  • This fixes an issue that happened to me in a Vue.js app where a @click event was bound to a <button> element inside a form wrapper. Avoid doing this unless you are using Vue's @submit.prevent event modifier. Sep 18, 2019 at 18:41
  • This was the case for me. By adding a type="button" to my button tag, the form wasn't submitted and the cancelled event was avoided. May 9, 2020 at 17:51
  • Excellent advice! Thanks for saving time
    – Roman
    Apr 20, 2022 at 21:15
16

In my case, I found that it is jquery global timeout settings, a jquery plugin setup global timeout to 500ms, so that when the request exceed 500ms, chrome will cancel the request.

1
  • 1
    Running into the same issue. In my case it is a local WordPress/WooCommerce development with VirtualBox guest server, and some WooCommerce AJAX requests have a predefined AJAX timeout of 5000ms. If someone ran into the same issue, this timeout defined in includes/class-wc-frontend-scripts.php file. Mar 6, 2020 at 14:02
16

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.

4
  • Exactly what happened. Turned on noscript plugin and suddenly iFrame was not loading anymore. Apr 24, 2017 at 8:06
  • For me, it was Hola plugin. After disabling, requests are no longer cancelled.
    – Raj
    Jul 29, 2017 at 11:29
  • 1
    In my case it was "JavaScript Errors Notifier" chrome extension
    – Alex
    Jan 21, 2019 at 9:12
  • I tried looking into everything and still no luck with Angular 8, disabled all extensions and still on slow 3G network previous calls are canceled. :(
    – born2net
    Jan 11, 2020 at 15:41
13

You might want to check the "X-Frame-Options" header tag. If its set to SAMEORIGIN or DENY then the iFrame insertion will be canceled by Chrome (and other browsers) per the spec.

Also, note that some browsers support the ALLOW-FROM setting but Chrome does not.

To resolve this, you will need to remove the "X-Frame-Options" header tag. This could leave you open to clickjacking attacks so you will need to decide what the risks are and how to mitigate them.

1
10

Here's what happened to me: the server was returning a malformed "Location" header for a 302 redirect. Chrome failed to tell me this, of course. I opened the page in firefox, and immediately discovered the problem. Nice to have multiple tools :)

1
  • Although very obvious as to the reason, but still, this is actually a very useful answer. I was editing some old coffeescript code, and had completely forgotten that single quotes didn't do the #{} interpolation, so the resulting url were malformed. But Chrome didn't tell me anything about it.
    – kumarharsh
    Nov 23, 2016 at 6:46
8

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/

1
  • can you basically just redirect from non certificate domain to certificate'ed one ? from naked to www? or you always see either canceled or certificate error? Sep 18, 2018 at 16:27
6

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.

1
  • I am seeing almost identical behaviour in Chrome 30 when using Datacash hosted payment services, but in my case the POST from the 3dsecure site to the Datacash site is canceled, despite both being https. It is proving to be something of a mystery.
    – Jason
    Oct 23, 2013 at 11:05
5

If you use axios it can help you

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

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

4

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

4

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.

4

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.

4

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.

3

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!

2

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

1
  • thanks, you save my time! I had an issue with iframe but couldn't realize why it was canceled. And your research helped me to debug and find the issue in fast re-rendering during iframe opening. Oct 8, 2021 at 6:27
2

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.

2

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

     ...
    });

})
1

I had the exact same thing with two CSS files that were stored in another folder outside my main css folder. I'm using Expression Engine and found that the issue was in the rules in my htaccess file. I just added the folder to one of my conditions and it fixed it. Here's an example:

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

So it might be worth you checking your htaccess file for any potential conflicts

1

happened to me the same when calling a. js file with $. ajax, and make an ajax request, what I did was call normally.

1

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.

1

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.

1

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.

0

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.

0

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

0

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.

0

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

0

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

0

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.

0

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.