代码之家  ›  专栏  ›  技术社区  ›  Mind full of blanks

登录页面HTTP请求无限发送

  •  1
  • Mind full of blanks  · 技术社区  · 1 年前

    几个小时前,我提出了一个类似的问题,但我提出了错误的问题。 真正的问题是,我有这个功能登录功能:

    async function entrar() {
            const user_name = document.getElementById('user_name').value.trim();
            const password = document.getElementById('password').value.trim();
    
        try {
            const response = await fetch('/user/search', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `user_name=${encodeURIComponent(user_name)}&password=${encodeURIComponent(password)}`
            });
    
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
    
            const objJson = await response.json();
    
            if (objJson && objJson.user_name === user_name && objJson.password === password) {
                localStorage.setItem('objJson', JSON.stringify(objJson));
                window.location.href = `/index?user_name=${encodeURIComponent(user_name)}&password=${encodeURIComponent(password)}`;
            } else {
                window.location.href = '/login';
            }
        } catch (error) {
            console.error('Error fetching data:', error);
            window.location.href = '/login'; // Redirect to login page on error
        }
    }
    
    

    它会检查我的数据库中是否有在文本框中指定了用户名和密码的用户,它实际上可以工作,并以状态200进行响应。问题是,这个函数将我重定向到路由:“/index?user_name=something&password=something”(是的,我知道它应该被编码,我将来会处理它),而这个路由从不响应,它被困在“挂起”状态,就像下图所示: Network status

    这是一条工作不正常的路线:

    app.get('/index', urlencodedParser, async function(req, res){
        let objJson = {};
        if(req.query.user_name) objJson.user_name = req.query.user_name; else objJson.user_name = false;
        if(req.query.password) objJson.password = req.query.password; else objJson.password = false;
        findUserOne(objJson, async function(result){
         if((result)&&(result.activate==true)){
             res.set('Content-Type', 'text/html');        
             const data = await fs.readFileSync('./index.html','utf8');
             await res.send(data);
         }else{
             res.set('Content-Type', 'text/html');
             const data = await fs.readFileSync('./login.html','utf8');
             await res.send(data);
         }
        });
    });
    

    我的登录字段:

    <div class="container">
            <h2 align="center">LOGIN</h2>
            <br>
            <center>
                <div align="center" style="width:30%;">
                    <input type="text" id="user_name" class="form-control" placeholder="Nome de usuário"><br>
                    <input type="password" id="password" class="form-control" placeholder="Senha"><br>
                    <br>
                    <button class="btn btn-lg btn-info" onclick="entrar()">Entrar</button>
                </div>
            </center>
        </div>
    
    
    1 回复  |  直到 1 年前
        1
  •  1
  •   Ricardo Gellman    1 年前

    您处理对的响应不正确 /index 在服务器端路由

    更新后端以将其处理为

    // Assuming `findUserOne` is a function that searches for a user in your database
    app.get('/index', urlencodedParser, async function(req, res) {
        let objJson = {};
        if (req.query.user_name) objJson.user_name = req.query.user_name;
        if (req.query.password) objJson.password = req.query.password;
    
        try {
            const result = await findUserOne(objJson);
    
            if (result && result.activate === true) {
                const data = await fs.readFileSync('./index.html', 'utf8');
                res.set('Content-Type', 'text/html');
                res.send(data);
            } else {
                const data = await fs.readFileSync('./login.html', 'utf8');
                res.set('Content-Type', 'text/html');
                res.send(data);
            }
        } catch (error) {
            console.error('Error finding user:', error);
            res.status(500).send('Internal Server Error'); // Handle error appropriately
        }
    });
    
    

    并调整你的客户以了解它

    async function entrar() {
        const user_name = document.getElementById('user_name').value.trim();
        const password = document.getElementById('password').value.trim();
    
        try {
            const response = await fetch('/user/search', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `user_name=${encodeURIComponent(user_name)}&password=${encodeURIComponent(password)}`
            });
    
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
    
            const objJson = await response.json();
    
            if (objJson && objJson.user_name === user_name && objJson.password === password) {
                localStorage.setItem('objJson', JSON.stringify(objJson));
                window.location.href = `/index?user_name=${encodeURIComponent(user_name)}&password=${encodeURIComponent(password)}`;
            } else {
                window.location.href = '/login';
            }
        } catch (error) {
            console.error('Error fetching data:', error);
            window.location.href = '/login'; // Redirect to login page on error
        }
    }