登录成功后无法跳转至success.html问题求助（Node.js+Express）

核心问题原因 #

你使用fetch异步提交登录请求时，服务端的res.redirect()只会返回一个重定向响应给fetch，但fetch不会自动触发页面跳转，只会接收响应内容，因此页面没有任何变化。

两种解决办法 #

办法一：移除fetch，使用表单默认提交 #

直接删除客户端的submit事件监听代码，让表单按照默认的<form action="/login" method="POST">规则提交，这样服务端的res.redirect()就能正常触发页面跳转。

修改后的客户端代码（去掉script部分）：

<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <style>
     //CSS Styles
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form id="loginForm" action="/login" method="POST">
            <div>
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div>
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Login</button>
        </form>
    </div>
</body>
</html>

办法二：保留fetch，客户端手动处理跳转 #

需要同时修改服务端和客户端代码，让服务端返回跳转指令，客户端收到后手动跳转。

服务端修改（登录接口）：

app.post('/login', (req, res) => {
    const { username, password } = req.body;

    sql.connect(config, (err) => {
        if (err) {
            console.log('Failed to connect to SQL Server.', err);
            res.status(500).json({ success: false, message: 'Failed to connect to the database' });
        } else {
            const request = new sql.Request();
            // 改成参数化查询，避免SQL注入
            request.input('username', sql.VarChar, username);
            request.input('password', sql.VarChar, password);
            request.query('SELECT * FROM dbo.Users WHERE userName = @username AND passwordd = @password', (err, result) => {
                if (err) {
                    console.log('Failed to execute SQL query.');
                    res.status(500).json({ success: false, message: 'Failed to execute SQL query' });
                } else {
                    if (result.recordset.length > 0) {
                        // 返回跳转路径
                        res.json({ success: true, redirectUrl: '/success' });
                    } else {
                        res.json({ success: false, message: 'Invalid username or password' });
                    }
                }
            });
        }
    });
});

客户端修改（fetch处理逻辑）：

document.getElementById('loginForm').addEventListener('submit', async (event) => {
    event.preventDefault();
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    const response = await fetch('/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `username=${username}&password=${password}`
    });

    const result = await response.json();
    if (result.success) {
        window.location.href = result.redirectUrl;
    } else {
        alert(result.message);
    }
});

重要安全提醒 #

你的原代码中使用字符串拼接SQL语句，存在严重的SQL注入风险，恶意用户可以通过构造特殊输入直接登录或破坏数据库。必须使用上面代码中的参数化查询方式（request.input()）来避免这个问题。

内容的提问来源于stack exchange，提问作者airejtashfeen