Ajax GET Запрос отправляется дважды

Ответ 1

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

1) Сначала я смог заблокировать ошибочный запрос, проверив IP-адрес в бэкэнде:

@app.route('/submit_time')
def submit_time():
   _ip = flask.request.environ.get('HTTP_X_REAL_IP', flask.request.remote_addr)
   if _ip == '128.177.108.218':
     return flask.jsonify({'route':'UNDEFINED-RESULT'.lower()})
   return flask.jsonify({"html":'<p>Added timestamp</p>'})

Вышесказанное - скорее временный взлом, поскольку нет гарантии, что целевой IP останется прежним.

2) Однако я обнаружил, что при работе по HTTPS также был удален повторяющийся запрос. Первоначально я загружал свое приложение с панели инструментов Pythonanywhere, что привело к http://www.testsite.com. Однако после того, как я установил соответствующий сертификат SSL, обновил страницу и снова запустил запрос, я обнаружил, что был получен желаемый результат.

Я присуждаю вознаграждение @computercarguy, поскольку его сообщение побудило меня подумать о внешних/сетевых причинах, по которым моя первоначальная попытка не удалась.

Ответ 2

С вашим последним обновлением я бы сказал, что это не дубликат запроса. В вашем журнале говорится, что один запрос был от Mozilla на компьютере под управлением Windows, а другой запрос поступил от Chrome на Mac, это просто 2 разных запроса, поступивших из двух разных мест, которые оказались во времени близкими друг к другу. Даже если это был тест с виртуальной машины, он не должен записывать несколько ОС или браузеров, поскольку ВМ позаботится обо всех переводах, предотвращая путаницу, подобную этой.

Вы не включаете IP-адреса, но если они являются публичными адресами (как, например, в 127.xxx, 10.xxx или 192.xxx), то это определенно два разных пользователя, которые используют ваше программное обеспечение одновременно время.

Если вы отслеживаете, что это один и тот же пользователь, это могут быть просто те, кто использует ваше программное обеспечение на 2 разных устройствах (например, настольный компьютер или мобильный телефон). Если это не разрешено, убедитесь, что их доступ отражает это. Если его можно отследить через DNS в разных географических точках, у вас может быть взломанная учетная запись для блокировки, пока реальный пользователь не сможет подтвердить свою личность.

Как бы вы ни делали это с новыми данными, я не думаю, что это на самом деле ваше программное обеспечение, если вы не можете воспроизвести его с помощью тестирования даже достаточно надежно. Потратьте время, чтобы подумать, что это может быть не ошибка, а что-то еще. Разработчики программного обеспечения должны думать, что все является ошибкой и их ошибкой, когда это может быть что-то мягкое или злонамеренная атака, которая раньше не рассматривалась.

Удачи и, надеюсь, я дал вам кое-что подумать!

Ответ 3

Очень необычное решение, но оно должно работать (если нет, я думаю, что проблему нельзя решить с помощью js.)

РЕДАКТИРОВАНИЕ: проверьте отправленный идентификатор в запросе ajax! (Так что проверяйте на стороне сервера!) Это наверняка будет уникальный идентификатор, поэтому вы можете проверять, имеет ли @computercarguy право или нет.

var ids = [];
var generateId = function(elem)
{
    let r = Math.random().toString(36).substring(7);
    while ($.inArray(r, ids) !== -1)
    {
        r = Math.random().toString(36).substring(7);
    }

    ids.push(r);
    elem.attr("id", r);
};

$(document).ready(function()
{
    $(".wrapper").find(".submit_stamp").each(function()
    {
        generateId($(this));
    });

    console.log(ids);
});

var ajaxHandler = function(stampElem, usedId)
{    
    let testData = new FormData();
    testData.append("time", stampElem.data('timestamp'));
    testData.append("ID", usedId);

    $.ajax({
        url: "/submit_time",
        type: "get",
        data: testData,
        success: function(response)
        {
            $('.wrapper').append(response.html);
            generateId(stampElem);
            if (stampElem.attr("id").length)
            {
                console.log("new id:"+stampElem.attr("id"));
            }
        },
    });

};

$(".wrapper").on("click", ".submit_stamp", function(ev)
{
    ev.preventDefault();
    ev.stopImmediatePropagation();

    if ($(this).attr("id").length)
    {
        let id = $(this).attr("id");
        $("#"+id).one("click",
            $.proxy(
                ajaxHandler, null, $(this), id
            )
        );
        $(this).attr("id", "");
    }
});

Ответ 4

Поэтому прежде всего я бы использовал приведенный ниже синтаксис в качестве личного предпочтения

$('.wrapper').click(function (event) {
    event.stopImmediatePropagation();
    $.ajax({
        url: "/submit_time",
        type: "get",
        data: {
            time: $(this).data('timestamp')
        },
        success: function (response) {
            $('.wrapper').append(response.html);
        },
    });
});

Также, как я уже сказал, вы должны убедиться, что при обращении к двум параллельным запросам они действительно относятся к одному IP + клиенту, иначе вы можете запутаться между параллельным запросом из разных мест, который будет повторяться как таковой

Ответ 5

Небольшое изменение в вашем файле JS.

$('.wrapper').on('click', '.submit_stamp', function(event){
   event.preventDefault();
   event.stopImmediatePropagation();
   $.ajax({
     url: "/submit_time",
     type: "get",
     data: {time: $(this).data('timestamp')},
     success: function(response) {
       $('.wrapper').append(response.html);
     },

   });
});