AJAX 请求无法直接触发浏览器重定向，res.redirect() 仅作用于 HTTP 响应本身，返回的 HTML 内容会被 JavaScript 接收并解析，导致 Unexpected token '
ajax 请求无法直接触发浏览器重定向，`res.redirect()` 仅作用于 http 响应本身，返回的 html 内容会被 javascript 接收并解析，导致 `unexpected token '前端通过 `window.location.replace()` 主动跳转。
在基于 Fetch API 的前后端交互中，一个常见误区是期望后端调用 res.redirect() 能像传统表单提交一样直接让浏览器跳转。实际上，fetch 发起的是异步 AJAX 请求，整个响应生命周期由 JavaScript 控制：即使服务端执行了 res.redirect()，Express 也只是向客户端（即 JS 代码）返回一个带有 302 状态码和 Location 头的响应；而 response.json() 方法会尝试将响应体解析为 JSON —— 此时若重定向目标是 HTML 文件（如 /webpages/codingspace/coding.html），响应体就是完整的 HTML 文本（以
✅ 正确解决方案是分离职责：
- 后端不再使用 res.redirect()，而是统一返回结构化 JSON 响应，包含业务状态与可选跳转路径；
- 前端根据响应内容判断逻辑，并主动调用浏览器 API 完成跳转。
以下是修正后的完整代码示例：
服务端（Node.js / Express）：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
app.get('/login', (req, res) => {
const { username, password } = req.query;
const sql = "SELECT * FROM authdetails WHERE username = ? AND password = ?";
db.query(sql, [username, password], (err, results) => {
if (err) {
console.error("Database error:", err);
return res.status(500).json({ error: "Database error" });
}
if (results.length > 0) {
// ✅ 不再使用 res.redirect()
res.json({
success: true,
message: "Login successful",
url: "/webpages/codingspace/coding.html"
});
} else {
res.json({
success: false,
message: "Invalid username or password"
});
}
});
});
客户端（JavaScript）：
document.addEventListener("DOMContentLoaded", function () {
const loginForm = document.getElementById("login-field");
loginForm.addEventListener("submit", function (event) {
event.preventDefault();
const username = document.getElementById("login-username").value.trim();
const password = document.getElementById("login-password").value.trim();
fetch(`/login?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`)
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data => {
if (data.success) {
alert("Login successful");
// ✅ 由前端主动跳转
window.location.replace(data.url);
} else {
alert(data.message || "Login failed");
}
// 重置表单
document.getElementById("login-username").value = "";
document.getElementById("login-password").value = "";
})
.catch(error => {
console.error("Login error:", error);
alert("An error occurred. Please try again.");
});
});
});
⚠️ 注意事项：
- URL 编码：务必对 username 和 password 使用 encodeURIComponent()，避免特殊字符（如 @, /, &）破坏 URL 结构；
- 安全提示：本例使用 GET + 明文密码仅作演示，生产环境应改用 POST、HTTPS、哈希密码（如 bcrypt）、CSRF 防护及 Session/JWT 认证；
- 跳转方式选择：window.location.replace(url) 更推荐（不保留当前页到历史栈），避免用户点击「返回」回到登录页后重复提交；若需保留历史，可用 window.location.href = url；
- 错误处理增强：建议服务端统一返回 success: boolean 字段，前端优先校验该字段而非依赖 message 字符串匹配，提升健壮性。
通过这种前后端协同的设计，既保持了 AJAX 的灵活性，又实现了符合用户预期的页面导航体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
