Может ли браузер дублировать POST запрос?

Есть проект на DST Portal, плюс мы к нему сделали некое приложение на Vue.js 3 + axios.

Есть бэк для него на Nginx + php-fpm 7.4 + laravel 8.
Приложения на отдельных доменах, используется CORS.
В nginx включен http2.

Приложение используется на планшетах на android 14 + Яндекс браузер, по wi-fi

Пользователь в браузере нажимает на кнопку, через axios отправляются запросы на бэк:
OPTIONS — потому что CORS.
POST запрос с данными.

Это штатное поведение.

Очень редко происходит такая ситуация:
OPTIONS
POST
POST

т.е. последний запрос дублируется, они абсолютно идентичные, интервал — около секунды.

Я добавил в запрос уникальный идентификатор, чтобы понять: это какой-то баг фронта, и функция отправки запроса выполняется дважды, или это что-то более глубокое. На бэке вижу, что идентификаторы у запросов одинаковые.

Мои варианты:
— axios дублирует POST запрос. Это странно, у него никаких плагинов не подключено, по идее не должен.
— Браузер дублирует запрос из-за нестабильности сети. Основная версия

Такое обычно происходит, когда запрос кидается в lifecycle-хуках, которые могут сработать много раз (например, updated), либо в watch. И когда у вас что-то ошибочно повторно перерендерится, то может бахнуть второй запрос. Дабл-клик по кнопке, которую вы не выключаете сразу после первого клика также не исключается.

Насчёт идентификатора вашего ничего не могу сказать, потому что не вижу, где и как вы его генерируете.

Дебажить, дебажить, и ещё раз дебажить VUE.

1. Если есть возможность запустить фронтенд на локалке в development environment, установите в браузер плагин Vuejs devtools, и посмотрите поведение компонента, кидающего запросы, может быть там что-то увидите.

2. Откройте devtools браузера и на вкладке Network и кликните ссылку в колонке Initiator (не знаю, как по-русски, не пользуюсь русским в браузере) у этих повторяющихся запросов. Если будут показаны разные участки кода, значит, где-то еще в коде затерялся такой же запрос.

3. Самое простое: прямо перед строчкой с вызовом запроса axios (прямо перед запросом, в этой же функции, не где-то вне её, а прямо в предыдущей строчке) напишите банальный console.log(«Gotcha!!!!»). Если сообщение в консоли браузера появится дважды, значит, проблема исключительно в логике вашей программы.

4. Если ваш ID действительно генерируется прямо рядом с вызовом запроса, прямо в той же самой функции (что исключает баг с тем, что в запрос подставляется где-то сохранённый и кэшированный фреймворком ID), и это действительно подлый Chromium повторяет запросы из-за крайне нестабильного коннекта у пользователя, то тогда генерируйте ID не просто рандомом, который всё же может повториться, а сгенерируйте нормальный UUID, вероятность повторения которого ЗНАЧИТЕЛЬНО ниже. При приходе запроса сохраняете этот UUID на короткое время где вам удобнее, и если придёт такой же запрос с таким же UUID, то не обрабатываете его. Этот же UUID вам может помочь и в других аспектах: например, вы можете его использовать как «Correlation ID» данного конкретного запроса. Его можно отражать в логах, передавать в другие сервисы, если у вас их несколько. И тогда вы сможете без проблем отслеживать жизненный цикл каждого конкретного запроса.

Похожая ситуация и у нас, а как можно решить проблему с дублированием запросов в браузере? 

Похожая ситуация и у нас, а как можно решить проблему с дублированием запросов в браузере? 

Ирина Савельева

Для решения проблемы с дублированием запросов в браузере можно предпринять следующие шаги:

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

Проверьте код на наличие ошибок: убедитесь, что код не содержит ошибок, которые могут привести к дублированию запросов. Например, проверьте, не вызываются ли запросы в lifecycle-хуках или в watch.

Используйте плагин Vuejs devtools: если есть возможность запустить фронтенд на локалке в development environment, установите в браузер плагин Vuejs devtools и посмотрите поведение компонента, кидающего запросы.

Проверьте вкладку Network в devtools браузера: откройте devtools браузера и на вкладке Network кликните ссылку в колонке Initiator у повторяющихся запросов. Если будут показаны разные участки кода, значит, где-то ещё в коде затерялся такой же запрос.

Добавьте console.log перед вызовом запроса: прямо перед строчкой с вызовом запроса axios (прямо перед запросом, в этой же функции, не где-то вне её, а прямо в предыдущей строчке) напишите банальный console.log(«Gotcha!!!!»). Если сообщение в консоли браузера появится дважды, значит, проблема исключительно в логике вашей программы.

Сгенерируйте UUID для уникальных идентификаторов: если ваш ID действительно генерируется прямо рядом с вызовом запроса, прямо в той же самой функции, и это действительно подлый Chromium повторяет запросы из-за крайне нестабильного коннекта у пользователя, то тогда генерируйте ID не просто рандомом, который всё же может повториться, а сгенерируйте нормальный UUID. При приходе запроса сохраняйте этот UUID на короткое время где вам удобнее, и если придёт такой же запрос с таким же UUID, то не обрабатывайте его.

Понятно, а как можно использовать UUID для отслеживания запросов? 

Понятно, а как можно использовать UUID для отслеживания запросов? 

Ирина Савельева

Для использования UUID (Universally Unique Identifier) для отслеживания запросов можно применить следующий подход:

Генерация UUID: создайте уникальный идентификатор для каждого запроса, используя алгоритм генерации UUID. Это обеспечит высокую вероятность уникальности идентификатора для каждого отдельного запроса.

Добавление UUID в запрос: включите сгенерированный UUID в данные запроса, чтобы он передавался на сервер вместе с остальными параметрами запроса.

Сохранение UUID на сервере: при получении запроса на сервере сохраняйте UUID вместе с другими данными запроса. Это позволит отслеживать и идентифицировать каждый запрос индивидуально.

Обработка дубликатов: если на сервер поступает запрос с уже существующим UUID, это может указывать на дублирование запроса. В таком случае можно принять решение о том, как обрабатывать такие ситуации, например, игнорировать повторные запросы или принимать их с определёнными условиями.

Использование UUID для корреляции: UUID также можно использовать в качестве «Correlation ID» для отслеживания жизненного цикла запроса через различные сервисы и системы. Это поможет связать логи и события, относящиеся к одному запросу, даже если они обрабатываются разными компонентами системы.

Да, браузер теоретически может дублировать POST запросы, хотя это и не является штатным поведением. Учитывая вашу ситуацию и проведенный анализ, вот более развернутый ответ и дополнительные варианты для рассмотрения:

Ваши варианты и их расширение:

1. Axios дублирует POST запрос: Хотя это маловероятно, полностью исключать нельзя. Даже без плагинов, в редких случаях могут возникать ошибки в самом Axios или в его взаимодействии с Vue.js. Однако, раз идентификаторы запросов на бэке одинаковые, это делает эту версию менее вероятной.

2. Браузер дублирует запрос из-за нестабильности сети: Это наиболее вероятная причина, особенно учитывая использование Wi-Fi на планшетах. Вот почему:

— Wi-Fi нестабильность: Wi-Fi соединения подвержены помехам и перебоям. В момент отправки POST запроса может произойти кратковременный разрыв соединения.

— Браузерные механизмы повторных попыток: Браузеры часто имеют встроенные механизмы для повторной отправки запросов, если они не получили подтверждение об успешной доставке в течение определенного времени. В условиях нестабильной сети, браузер может ошибочно решить, что первый запрос не был доставлен и повторить его.

— HTTP/2: Хотя HTTP/2 обычно повышает производительность, в некоторых случаях он может усложнить отладку проблем с сетью. Например, multiplexing может затруднить отслеживание отдельных запросов.

Ну если взять основные решения диагностики то:

— Проблемы с CORS: Хотя вы используете CORS, убедитесь, что конфигурация на бэкенде абсолютно корректна. Неправильная настройка CORS может приводить к неожиданному поведению браузера, включая повторные запросы. Проверьте заголовки Access-Control-* в ответах сервера. Особенно обратите внимание на Access-Control-Allow-Origin, Access-Control-Allow-Methods, и Access-Control-Allow-Headers.

— Проблемы с Nginx: Редко, но возможно, что Nginx может дублировать запросы. Проверьте логи Nginx на наличие ошибок или предупреждений, связанных с этими запросами. Убедитесь, что в конфигурации Nginx нет никаких директив, которые могли бы вызывать повторную отправку запросов (например, proxy_next_upstream).

— Проблемы с PHP-FPM: Хотя это маловероятно, проверьте логи PHP-FPM на наличие ошибок или предупреждений, связанных с обработкой этих запросов.

— Проблемы с Laravel: Убедитесь, что в вашем Laravel приложении нет middleware или других компонентов, которые могли бы вызывать повторную обработку запроса. Проверьте логи Laravel на наличие ошибок или предупреждений.

— Проблемы с планшетами/браузером: Хотя вы используете распространенную конфигурацию (Android 14 + Яндекс.Браузер), попробуйте воспроизвести проблему на других устройствах и браузерах, чтобы исключить специфические баги конкретной комбинации. Обновите Яндекс.Браузер до последней версии.

— Проблемы с Wi-Fi роутером: Проверьте настройки вашего Wi-Fi роутера. Убедитесь, что он работает стабильно и не имеет проблем с пропускной способностью или перегрузкой. Попробуйте использовать другой Wi-Fi роутер или подключиться к сети через Ethernet, чтобы исключить проблемы с Wi-Fi.

— Логирование на клиенте: Добавьте более детальное логирование