为什么我通过Axios收到HTTP调用行为？

Question

我正在从简单的路线创建过渡，并使用简单的过滤器..

在我的第一个路线 / LOGIN 上，我有一个基本的登录表单。我使用axios在我的路线 / login / authentication / 中提供 POST ，如果它是肯定的，则在 url中提供替换 重定向到另一个路由，即 / HOME 。

在 / HOME 路径中，我有一个基本的过滤形式，单击“提交表单”按钮正在向我的发出 AXIOS（GET）请求。 / LOGIN 路由，而不是此过滤器表单的 POST 请求。

当我通过 / HOME 路由从表单过滤器发送 POST 类型请求时，会发生以下情况：

表格-登录路由器类别：

class LoginForm extends Form {
    constructor(id){
        super(id);

        // FL:     FORM LOGIN
        // FLUI:   FORM LOGIN USERNAME INPUT 
        // FLUPI:  FORM LOGIN USERNAME-PASSWORD INPUT
        // FBSL:   FORM BUTTON SUBMIT LOGIN
        // FBMEUI: FORM BACKEND MESSAGE ERROR USER INFORMATIONS
        this.form           = document.getElementById(this.id);
        this.username       = document.getElementById('FLUI');
        this.password       = document.getElementById('FLUPI');
        this.btnSubmit      = document.getElementById('FBSL');
        this.backendMessage = document.getElementById('FBMEUI');
    }

    get usernameValue(){ return this.username.value; }
    get passwordValue(){ return this.password.value; }

    /** @description MANIPULA TODA A LÓGICA DO FORMULÁRIO */
    create(){
        this.verifyInputsValue();

        // ESCUTA O EVENTO 'SUBMIT' DO FORMULÁRIO
        this.btnSubmit.addEventListener('click', event => {
            event.preventDefault();
            event.stopImmediatePropagation();

            this.form.setAttribute('class', 'was-validated');

            this.clearLoginButton();
            this.createLoginLoading();

            // VERIFICA SE O FORMULÁRIO ESTÁ VÁLIDO
            if(!this.form.checkValidity()){
                event.stopImmediatePropagation();

                this.clearLoginButton()
                this.createLoginText();
            } else {
                const httpRequest = new HTTP();
                httpRequest.postUserAuthentication(this.usernameValue, this.passwordValue).then((response) => {
                    console.log(response)
                    this.redirectURL(response.data.token);
                }).catch(() => {
                    this.clearLoginButton();
                    this.createLoginText();

                    super.clearInvalidFeedback(this.backendMessage);
                    this.createInvalidFeedback();
                });
            }
        });
    }

    /** @description CRIA A MENSAGEM RETORNADA DO BACKEND */
    createInvalidFeedback(){
        const brElement = document.createElement('BR');
        this.backendMessage.appendChild(document.createTextNode("Usuário ou senha inválidos!"));
        this.backendMessage.appendChild(brElement);
        this.backendMessage.appendChild(document.createTextNode("Caso precise de ajuda, clique em \" Precisa de Ajuda?\""))
    }

    /** @description CRIA O LOADING SPINNER */
    createLoginLoading(){
        const loadingSpinner = new LoadingSpinner();
        this.btnSubmit.appendChild(loadingSpinner.createMicrosoftType());
    }

    /** @description MANIPULA TODA A LÓGICA DO FORMULÁRIO */
    createLoginText(){
        this.btnSubmit.appendChild(document.createTextNode("LOGIN"));
    }

    /** @description LIMPA O CONTAINER DO BOTÃO DE LOGIN */
    clearLoginButton(){
        this.btnSubmit.firstChild.remove();
    }

    /** @description BLOQUEIA DETERMINADOS CARACTERES A SEREM DIGITADOS NOS INPUTS */
    verifyInputsValue(){
        this.username.addEventListener('keypress', event => {
            super.cancelDefaultValidation(this.username);
            super.blockSpecialCharacters(event, ["!", "@", "#", "$", "%", "¨", "&", "*", "(", ")", "_", "-", "+", "=", "`", "´", "[", "]", "{", "}", "^", "~", "<", ">", ",", ";", ":", "?", "/", "\"", "\'", "|", "\\", "Ç", " "]);
        });

        this.password.addEventListener('keypress', event => {
            super.cancelDefaultValidation(this.password);
            super.blockSpecialCharacters(event, [" "]);
        });
    }

    /** @description REDIRECIONA A URL PARA OUTRA ROTA, UTILIZANDO O MÉTODO GET */
    redirectURL(token){
        window.location.replace(`http://localhost:3000/home/v1/?token=${token}`);
    }

}

表格-/ HOME FILTER CLASS

/** @description: É ACIONADO QUANDO O HTML FOI COMPLETAMENTE CARREGADO E ANALISADO, SEM AGUARDAR POR FOLHA DE ESTILOS, IMAGENS E SUBFRAMES PARA ENCERRAR O CARREGAMENTO */
window.addEventListener('DOMContentLoaded', () => {
    const btnSubmit = document.getElementById('FBSF');
    btnSubmit.addEventListener('click', (event) => {
        event.preventDefault();
        event.stopImmediatePropagation();

        const httpRequest = new HTTP();
        httpRequest.postFilter("shoppingId", "storeId", "periodOf", "periodUntil", "kpi", "select").then(response => {
            console.log(response)
        }).catch(error => {
            console.log(error)
        });


    });

});

HTTP AXIOS-CONTROLLER

class HTTP {

    async postFilter(shoppingId, storeId, periodOf, periodUntil, kpi, select){
        return await axios.post('/home/v1/filter/', {
            shoppingId:  shoppingId,
            storeId:     storeId,
            periodOf:    periodOf,
            periodUntil: periodUntil,
            kpi:         kpi,
            select:      select
        }, {
            method: 'POST'
        });
    }

    async postUserAuthentication(username, userPwd){
        return await axios.post('/login/authentication/', {
            username: username,
            password: userPwd
        });
    }
}