POST请求后重定向到另一个HTML文档

Question

我有一个问题。我正在做一个登录API从大学的一个项目。事情是这样的。我有一个表单，用户在其中输入他的电子邮件和密码，我想要的是：如果答案是正确的，即状态200，它会将我重定向到项目中的另一个HTML文档，在这种情况下，它被称为"；home.html"；。因此，我从客户端检查了响应是否正确，数据传输是否成功，但尽管我读了几篇帖子，但我无法给出解决方案。我将附上HTML代码、JS(前端((我使用的是Vainilla JS(、带有Express的NodeJS服务器和POST请求的代码。

HTML表单

<form action="/user/login" method="POST" id="form"> 
<div class="form-group">
<label for="email" class="etiqueta">E-Mail</label>
<input type="emai" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Ingresa tu Email" required>
</div>
<div class="form-group">
<label for="password" class="etiqueta">Contraseña</label>
<input type="password" class="form-control" id="password" placeholder="Contraseña" required>
</div>
<br>
<button type="submit" id="boton-inicia" class="btn btn-primary">Inicia Sesion</button>
</form>

JS前端

// Funcion de envio
iniciaSesion = (e) => {
e.preventDefault();
// Declaro la constante
const host = 'http://localhost:3000/user/login';
// Declaro una constante que va a obtener los valores de los inputs
const form = {
email: document.getElementById("email").value,
password: document.getElementById("password").value
};
if (form.email === '', form.password === ''){
UI.mostrarAlerta('Por favor, ingrese todos los datos', 'danger');
} else { 
// Declaro su end-point, metodo + envio en JSON
fetch(host, {
method: 'POST',
body: JSON.stringify(form),
headers: {
'Content-type': 'application/json'
}
}).then((response) => {
// console.log(response);
return response.text();
}).then((info) => {
const json = JSON.parse(info)
// console.log(json);
}).catch((error) => {
console.error(error);
})
}
};
// Llamo al boton y le agrego su evento y defino la funcion
document.getElementById("boton-inicia").addEventListener('click', iniciaSesion);

节点/Express服务器

// Modulos requeridos
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const connectWithMongo = require("./config/db"); // Llamo a la configuracion de conexion a la DB
const user = require("./routes/user"); // Llamo al modelo de usuarios
// Inicios
connectWithMongo();
const app = express();
const publicDirectory = path.join(__dirname, "../public/");
// Declaro puerto para el servidor 
const PORT = process.env.PORT || 3000; 
//Middleware
app.use(express.static(publicDirectory));
app.use(bodyParser.json());
app.use(express.urlencoded({extended: true}));
app.use(express.json());
// Con esta peticion, chequeo que la API este funcionando
app.get("/", (req,res) => {
res.json({
message: "Api Running"
});
});
app.use("/user", user);
app.listen(PORT, (req,res) => {
console.log(`Server iniciado en puerto ${PORT}`);
});

POST方法

router.post("/login", [
// Le indico los inputs a chequear
check("email", "Por favor, ingrese un email").isEmail(),
check("password", "Por favor, ingrese una contraseña").isLength({min: 6})
], async (req, res) => {
// Requiero la data
const { email, password } = req.body;
try {
// Declaro en una variable que busque a un usuario por email si existe
let user = await User.findOne({
email
});
// Declaro que, si el email es distinto, devuelva un mensaje
if (!user)
return res.status(401).json ({
message: "Usuario no existe"
});
// Constante que va a comparar email con contraseña
const esIgual = await bcrypt.compare(password, user.password);
// Declaro que, si el email es distinto, devuelva un mensaje
if (!esIgual)
return res.status(401).json({
message: "Contraseña no coincide"
});
const payload = {
user: {
id: user.id
}
};
jwt.sign(payload,"randomString", {
expiresIn: 10000
}, (err, token) => {
if (err) throw err;
res.status(200).json({
token
});
}
);
} catch (e) {
console.log(e);
res.status(500).json({
message: "Error de servidor"
});
}
});

谢谢大家！

PD：我从浏览器控制台附加了一个标题，你可以看到，我有来自身份验证的令牌和响应的状态。点击此处查看！

Answer 1

由于您通过JavaScript提交表单，因此在成功调用后可以使用window.location.replace()

fetch(host, {
method: 'POST',
body: JSON.stringify(form), 
headers: { 'Content-type': 'application/json' }
}).then((response) => {
// console.log(response);
return response.text();
}).then((info) => {
const json = JSON.parse(info)
window.location.replace("/home.html"); // <= HERE
// console.log(json);
}).catch((error) => {
console.error(error);
})

此外，您可以直接读取json响应，而无需执行text()和JSON.parse:

fetch(host, {
method: 'POST',
body: JSON.stringify(form),
headers: { 'Content-type': 'application/json' }
})
.then(response => response.json())
.then(json => {
// do stuff with `json` body
window.location.replace("/home.html"); // <= HERE
})
.catch(console.error)