Что означает статус = отменено для ресурса в Инструментах разработчика Chrome?

402

Что может привести к отмене страницы? У меня есть скриншот инструментов разработчика Chrome.

Отмененный ресурс

Это происходит часто, но не каждый раз. Кажется, что как только некоторые другие ресурсы кэшируются, обновление страницы загрузит LeftPane.aspx. И что действительно странно, это происходит только в Google Chrome, а не в Internet Explorer 8. Есть идеи, почему Chrome отменит запрос?

styfle
источник
13
Возможно, вы сможете получить более подробную информацию из трассировки net-internals . У меня была похожая проблема, и я обнаружил, что в моем случае она была net::ERR_ABORTEDзакрыта. Если это так, в этом посте объясняется, что «net :: ERR_ABORTED предназначен для создания только в том случае, если действие пользователя вызывает прерывание загрузки. Это может произойти, когда новая навигация прерывает существующую или когда пользователь нажимает кнопку STOP кнопка «.
Джон Маккарти
Спасибо. В моем случае это не пользователь, потому что я пользователь. Страница имеет (слишком) много кадров. Может быть, кадр src меняется? Просто странно, что я никогда не видел, чтобы это произошло в IE. Я посмотрю в сети.
Styfle
@ nondescript1 Я сделал захват при воспроизведении ошибки и выгрузил в файл. Теперь у меня есть 18 000 строк файла JSON. Что я ищу?
Styfle
3
Я, честно говоря, не знаю. На самом деле наткнулся на ваш вопрос, когда я искал больше информации о статусе = отменил себя, поэтому я только добавляю комментарии, а не ответ;). У меня нет причин думать, что это связано с кэшированием. Я более подозрительно отношусь к другой навигации, инициированной кем-то на странице. Когда я увидел это, я пытался начать загрузку с помощью window.open (), что привело к отмене другого запроса к серверу. В моем случае в Firefox такой проблемы не было, а в Chrome.
Джон Маккарти
1
Точно так же, само собой разумеется, что одна из возможных причин «(отменено)» в столбце состояния - хотя определенно не единственная возможная причина - это то, что указанный URL-адрес возвратил 404 или другую ошибку. Несколько раз принудительно обновите URL-адрес в другой вкладке, чтобы убедиться, что он загружается последовательно.
Ракслице

Ответы:

592

Мы боролись с подобной проблемой, когда Chrome отменял запросы на загрузку вещей в рамках или фреймах, но только периодически, и это казалось зависимым от компьютера и / или скорости интернет-соединения.

Эта информация устарела на несколько месяцев, но я создал Chromium с нуля, покопался в источнике, чтобы найти все места, где запросы могут быть отменены, и установил контрольные точки на всех них для отладки. По памяти единственные места, где Chrome отменит запрос:

  • Элемент DOM, который вызвал выполнение запроса, был удален (т. Е. Загружается IMG, но перед загрузкой вы удалили узел IMG)
  • Вы сделали что-то, что сделало загрузку данных ненужной. (т.е. вы начали загружать iframe, затем изменили src или перезаписали содержимое)
  • К одному и тому же серверу поступает множество запросов, и проблема с сетью при более ранних запросах показала, что последующие запросы не работают (ошибка поиска DNS, более ранний (такой же) запрос, например, код ошибки HTTP 400 и т. Д.)

В нашем случае мы, наконец, отследили его до одного фрейма, пытаясь добавить HTML к другому фрейму, что иногда случалось до того, как фрейм назначения даже загрузился. После того, как вы дотронетесь до содержимого iframe, он больше не сможет загружать в него ресурс (как он узнает, куда его поместить?), Поэтому он отменяет запрос.

whamma
источник
2
Очень информативно, спасибо. Мне трудно воспроизвести эту ошибку, потому что, когда что-то кэшируется, этого не происходит. Если установить точку останова в моем JavaScript, это не произойдет. Ваш первый пункт, вероятно, не проблема, потому что я не вижу удаляемого элемента. Я точно знаю, что это не пул 3. Что вы подразумеваете под «Когда вы касаетесь содержимого iframe, он больше не может загружать ресурс в него»? Можете привести пример?
Styfle
1
Интересно. Поэтому мне нужно найти все document.writes в этом кадре и убедиться, что они пишут только при загрузке кадра. Я отмечу это как правильный ответ, так как вы ответили на значение этого статуса.
Styfle
3
@styfle Да, но это могут быть и другие вещи, кроме document.write. Все, что пытается записать во фрейм, например appendChild или аналогичное, может вызвать это. Возможно, вы захотите создать обработчик onLoad в каждом кадре, который записывает trueв некоторую переменную, а затем другие кадры сначала ищут это, прежде чем что-либо касаться.
whamma
14
У меня также были ужасные проблемы с этим. Я обнаружил одну вещь, которая последовательно вызывает это, если ответ AJAX имеет код состояния 301/302, а URL-адрес перенаправления находится в другом домене. Это последовательное воспроизведение проблемы для меня.
Eb80
1
Для меня это было добавление iframe к телу, а затем сразу же удаляется из тела. Я поставил разрыв строки и вопроса не было. Поэтому поставьте некоторое время ожидания (15 мс) и преодолеть его. @whamma это действительно мотивирует то, как ты решил эту проблему. Спасибо за такие большие подробности. :-)
Мухаммед Бэзил
53

status = отменено может произойти и в запросах ajax для событий JavaScript:

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

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

Событие успешно отправляет запрос, но затем отменяется (но обрабатывается сервером). Причина в том, что элементы отправляют формы по событиям щелчка, независимо от того, выполняете ли вы какие-либо запросы ajax для того же события щелчка.

Чтобы предотвратить отмену запроса, JavaScript event.preventDefault (); должны быть названы:

<script>
  $("#call_ajax").on("click", function(event){
     event.preventDefault();
     $.ajax({
        ...    
     });
  });
</script>
Fuco
источник
3
Это спасло меня, была проблема в моем случае, когда я использовал angular's ng-clickна кнопке с, type="submit"а затем сделал некоторые сети в вызываемой функции. Хром продолжал отменять этот запрос ...
Робин
1
К сожалению, это не работает для меня. Любые другие намеки?
Кшиштоф Мадей
Ваов спас меня тоже! Для углового события ng-click я вложил $ http-запросы, и второй был отменен. После установки строки предотвращения по умолчанию она снова заработала, спасибо.
Бахадир Тасдемир,
Спасибо за это. Я знал, что это не CORS или проблема DOM. Возможно, @whamma может обновить свой ответ, чтобы включить это как возможную причину для полноты :)
glidester
Приветствую Господа! Сэр, вы абсолютный гений! Я был спасен !!
Дильнур Сингх
25

NB: убедитесь, что у вас нет элементов обтекания .

У меня была похожая проблема, когда моя кнопка с onclick = {} была обернута в элемент формы. При нажатии на кнопку форма также отправляется, и это все испортило ...

Этот ответ, вероятно, никогда не будет прочитан никем, но я решил, почему бы не написать его :)

stianlp
источник
Это было основной причиной для меня - кнопка дважды вызывала POST. Я не хотел перемещать кнопку из элемента формы из-за CSS, поэтому это было решением: stackoverflow.com/questions/932653/…
Николай Куделия,
Та же проблема. Чтобы уточнить, у меня была кнопка, содержащаяся в форме с типом отправки, но у меня был щелчок, который выполнял отправку формы jquery, ajax submit. Это работало в FF, но провалилось в chome и IE, и сводило меня с ума, пока я не нашел его.
ChrisThompson
Это устраняет проблему, которая произошла со мной в приложении Vue.js, когда @clickсобытие было связано с <button>элементом внутри оболочки формы. Избегайте этого, если вы не используете @submit.preventмодификатор событий Vue .
Пол Венцель
Это был случай для меня. При добавлении type="button"тега моей кнопки форма не была отправлена, а отмененное событие было исключено.
Брэндон Меденвальд
12

Еще одна вещь, на которую стоит обратить внимание, это расширение AdBlock или расширения в целом.

Но "много" людей имеют AdBlock ....

Чтобы исключить расширения, откройте новую вкладку в режиме инкогнито, убедившись, что «allow in incognito выключен» для расширений, которые вы хотите протестировать.

Джеймс Кибурз
источник
Именно так и произошло. Включил плагин noscript и вдруг iFrame больше не загружался.
Маргус Пала
Для меня это был плагин Hola. После отключения запросы больше не отменяются.
Ленин Радж Раджасекаран
1
В моем случае это был «Ошибка JavaScript Notifier» хром расширения
AleX
Я пытался разобраться во всем, и все еще безуспешно с Angular 8, отключил все расширения и все еще в медленной сети 3G предыдущие вызовы отменены. :(
born2net
10

Возможно, вы захотите проверить тег заголовка «X-Frame-Options». Если установлено значение SAMEORIGIN или DENY, вставка iFrame будет отменена Chrome (и другими браузерами) в соответствии со спецификацией .

Также обратите внимание, что некоторые браузеры поддерживают настройку ALLOW-FROM, а Chrome - нет.

Чтобы решить эту проблему, вам нужно будет удалить тег заголовка «X-Frame-Options». Это может сделать вас уязвимыми для атак с использованием щелчков, поэтому вам нужно будет решить, каковы риски и как их снизить.

Джастин Клауд
источник
Это была именно моя проблема. В этой теме есть хорошие ответы о том, как это исправить: stackoverflow.com/questions/6666423/…
ToniTornado
8

В моем случае я обнаружил, что это глобальные настройки тайм-аута jquery, глобальный тайм-аут установки плагина jquery равен 500 мс, поэтому, когда запрос превышает 500 мс, chrome отменит запрос.

limodou
источник
Встречаясь с той же проблемой. В моем случае это локальная разработка WordPress / WooCommerce с гостевым сервером VirtualBox, а для некоторых запросов WooCommerce AJAX заданное время ожидания AJAX составляет 5000 мс. Если кто-то столкнулся с той же проблемой, это время ожидания определено в includes/class-wc-frontend-scripts.phpфайле.
Иван Шацкий
7

Вот что случилось со мной: сервер возвращал искаженный заголовок «Location» для редиректа 302. Chrome не сказал мне этого, конечно. Я открыл страницу в Firefox и сразу обнаружил проблему. Приятно иметь несколько инструментов :)

Джаред Форсайт
источник
Хотя это очень очевидно в отношении причины, но все же, это на самом деле очень полезный ответ. Я редактировал какой-то старый код coffeescript и совершенно забыл, что одинарные кавычки не выполняют #{}интерполяцию, поэтому полученный URL был искажен. Но Chrome ничего не сказал мне об этом.
kumarharsh
4

Еще одно место, с которым мы столкнулись, (canceled)- это неверная конфигурация сертификата TLS. Если такой сайт https://www.example.comнеправильно настроен, что сертификат не включает, www.но действителен для https://example.com, chrome отменит этот запрос и автоматически перенаправит на последний сайт. Это не относится к Firefox.

В настоящее время действительный пример: https://www.pthree.org/

Уильям Буддингтон
источник
Вы можете в основном просто перенаправить из домена без сертификата на один сертификат? от голого до www? или вы всегда видите либо отмененную, либо ошибку сертификата?
Константин Вахрушев
3

Отмененный запрос произошел со мной при перенаправлении между защищенными и незащищенными страницами в отдельных доменах внутри фрейма. Перенаправленный запрос показывался в инструментах разработчика как «отмененный» запрос.

У меня есть страница с iframe, содержащая форму, размещенную на моем платежном шлюзе. Когда форма в iframe была отправлена, платежный шлюз перенаправлял обратно на URL на моем сервере. Недавно редирект перестал работать и вместо этого превратился в «отмененный» запрос.

Похоже, что Chrome (я использовал Windows 7 Chrome 30.0.1599.101) больше не позволял перенаправлению внутри iframe переходить на незащищенную страницу в отдельном домене. Чтобы это исправить, я просто позаботился о том, чтобы все перенаправленные запросы в iframe всегда отправлялись на защищенные URL-адреса.

Когда я создал более простую тестовую страницу только с iframe, в консоли появилось предупреждение (которое я пропустил ранее или, возможно, не показывал):

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

Перенаправление превратилось в отмененный запрос в Chrome на ПК, Mac и Android. Я не знаю, зависит ли это от настроек моего сайта (SagePay Low Profile) или что-то изменилось в Chrome.

Фил М
источник
Я наблюдаю практически идентичное поведение в Chrome 30 при использовании платежных сервисов, размещенных на Datacash, но в моем случае POST с сайта 3dsecure на сайт Datacash отменяется, несмотря на то, что оба протокола https. Это оказывается чем-то загадочным.
Джейсон
2

Chrome версии 33.0.1750.154 m последовательно отменяет загрузку изображений, если я использую мобильную эмуляцию, направленную на мой локальный хост ; в частности, при включенном User Agent (в отличие от настроек экрана).

Когда я отключаю подмену User Agent; запросы на изображения не отменяются, я вижу изображения.

Я до сих пор не понимаю, почему; в первом случае, когда запрос отменяется, заголовки запроса (ВНИМАНИЕ: отображаются временные заголовки) имеют только

  • принимать
  • Cache-Control
  • Pragma
  • Referer
  • User-Agent

В последнем случае все эти плюс другие, как:

  • печенье
  • соединение
  • хозяин
  • Accept-Encoding
  • Accept-Language

пожимание плечами

Красный горох
источник
2

Я получил эту ошибку в Chrome, когда я перенаправил через JavaScript:

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

Как видите, я забыл «http: //» . После того, как я добавил это, это работало.

Gerfried
источник
2

Для моего случая у меня был якорь с событием клика, как

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

Внутри события клика у меня был сетевой звонок, Chrome отменил запрос. Якорь имеет hrefс ""помощью, он перезагружает страницу и в то же время он имеет нажмите событие с сетевым вызовом , который получает отменен. Всякий раз, когда я заменяю на hrefпустоту, как

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

Проблема ушла!

Тасним Реза
источник
2

Вот еще один случай, когда Chrome отменял запрос, с которым я только что столкнулся, и на который нет ответов.

В двух словах
Самоподписанный сертификат не является доверенным на моем телефоне Android.

Детали
Мы находимся в стадии разработки / отладки. URL-адрес указывает на самоподписанный хост. Код похож на:

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

Chrome просто отменил запрос молча, не оставив новичка в веб-разработке, как я, чтобы решить эту проблему. Как только я скачал и установил сертификат с помощью телефона Android, проблема исчезла.

bestOfSong
источник
2

Если вы используете некоторые основанные на Observable HTTP-запросы, такие как встроенные в Angular (2+), тогда HTTP-запрос может быть отменен, когда observable отменяется (обычное дело, когда вы используете switchMapоператор RxJS 6 для объединения потоков) , В большинстве случаев достаточно использовать mergeMapоператор, если вы хотите, чтобы запрос завершился.

Даниэль Кукал
источник
1

У меня была та же самая вещь с двумя файлами CSS, которые были сохранены в другой папке вне моей основной папки CSS. Я использую Expression Engine и обнаружил, что проблема была в правилах в моем файле htaccess. Я просто добавил папку к одному из моих условий, и она исправила это. Вот пример:

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

Так что, возможно, стоит проверить файл htaccess на возможные конфликты.

gelviis
источник
1

Я включил все типы шрифтов, а также woff , woff2 , ttf, когда я вставляю веб-шрифт в таблицу стилей. Недавно я заметил, что Chrome отменяет запрос к ttf и woff, когда присутствует woff2 . Я использую Chrome версии 66.0.3359.181 прямо сейчас, но я не уверен, когда Chrome начал отменять дополнительные типы шрифтов.

Али Шейхпур
источник
1

У нас была эта проблема с тегом <button>в форме, который должен был отправить ajax-запрос от js. Но этот запрос был отменен из-за браузера, который отправляет форму автоматически при любом нажатии buttonвнутри формы.

Так что если вы действительно хотите использовать button вместо обычной divили spanна странице, и вы хотите отправить форму throw js - вы должны настроить слушателя с preventDefaultфункцией.

например

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

    e.preventDefault();

    //do ajax
    $.ajax({

     ...
    });

})
Денис Матафонов
источник
0

случилось то же самое со мной при звонке. JS файл с $. Ajax, и сделать запрос AJAX, что я сделал, было нормально позвонить.

Марио Гонсалес Флорес
источник
0

В моем случае код для отображения окна почтового клиента заставил Chrome прекратить загрузку изображений:

document.location.href = mailToLink;

Помогло перемещение его в $ (window) .load (function () {...}) вместо $ (function () {...}).

Николай Шестаков
источник
0

Это может помочь любому, кто сталкивался с отмененным статусом, когда опускал возвращаемое значение false; в форме представить. Это привело к тому, что после отправки ajax сразу же последовало действие отправки, которое перезаписало текущую страницу. Код показан ниже, с важным возвращением false в конце.

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

Надеюсь, что это помогает кому-то.

Джон П Смит
источник
0

Для тех, кто приходит из LoopbackJS и пытается использовать пользовательский метод потока, как показано в их примере диаграммы. Я получал эту ошибку, используя PersistedModel, переключение на основную Modelисправил мою проблему eventsourceотмены статуса.

Опять же, это специально для петлевого API. И так как это лучший ответ и топ в Google, я решил добавить это в смесь ответов.

NodeDad
источник
0

Я столкнулся с той же проблемой, где-то глубоко в нашем коде у нас был этот псевдокод:

  • создать фрейм
  • загрузка iframe отправить форму

  • Через 2 секунды удалите фрейм

таким образом, когда серверу требуется более 2 секунд, чтобы ответить, если iframe, на который сервер записывал ответ, был удален, но ответ еще не был записан, но не было записано iframe, таким образом, chrome отменил запрос, таким образом, чтобы избежать этого, я позаботился о том, чтобы iframe удалялась только после окончания ответа, или вы можете изменить цель на «_blank». Таким образом, одна из причин: когда ресурс (в моем случае iframe), в который вы что-то пишете, удаляется или удаляется до того, как вы перестанете писать в него, запрос будет отменен

Hiresh
источник
0

Для меня статус «отменен» был, потому что файл не существует. Странно почему хром не показывает 404.

FreeLightman
источник
0

Это было так же просто, как неверный путь для меня. Я бы предложил, чтобы первым шагом в отладке было посмотреть, сможете ли вы загрузить файл независимо от AJAX и т. Д.

Cameron
источник
0

Запросы могли быть заблокированы плагином для отслеживания.

Натан
источник
0

Это случилось со мной при загрузке 300 изображений в качестве фоновых изображений. Я предполагаю, что однажды первый тайм-аут, он отменил все остальные или достиг максимального числа одновременных запросов. необходимо реализовать 5 за один раз

AwokeKnowing
источник
0

Одной из причин может быть то, что XMLHttpRequest.abort () был вызван где-то в коде, в этом случае запрос будет иметь cancelledстатус на вкладке Сеть инструментов разработчика Chrome.

Александр Шумилов
источник
0

В моем случае это начало прибывать после обновления chrome 76.

Из-за некоторых проблем в моем коде JS, window.location неоднократно обновлялся, что приводило к отмене предыдущего запроса. Хотя проблема существовала и раньше, Chrome начал отменять запрос после обновления до версии 76.

Вишал
источник
0

У меня была такая же проблема при обновлении записи. Внутри save () я подготавливал необработанные данные, взятые из формы, в соответствии с форматом базы данных (выполнял много операций по отображению значений перечислений и т. Д.), И это периодически отменяет запрос put. я решил это, вынув данные prepping из save () и создав выделенный метод dataPrep () из него. Я превратил этот dataPrep в асинхронный и ожидаю преобразования данных, интенсивно использующего память. Затем я возвращаю предварительно подготовленные данные методу save (), который я мог бы использовать в http-клиенте. Я убедился, что я жду dataPrep () перед вызовом метода put:

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

Это решило прерывистую отмену запроса.

meol
источник