js实现301重定向

使用 window.location 实现重定向

通过修改 window.location.href 或 window.location.replace 实现页面跳转。replace 方法不会在历史记录中留下原始页面，更适合模拟 301 重定向。

// 方法1：直接修改 href（会保留历史记录）
window.location.href = "https://example.com/new-page";

// 方法2：使用 replace（无历史记录）
window.location.replace("https://example.com/new-page");

通过 HTTP 响应头实现

在服务器端设置 HTTP 状态码为 301 并返回 Location 头，这是标准的 301 重定向方式。前端可通过 fetch 或 XMLHttpRequest 检测重定向，但无法直接控制。

// 示例：检测服务器是否返回 301
fetch("/old-page", { redirect: "manual" })
  .then(response => {
    if (response.status === 301) {
      window.location.href = response.headers.get("Location");
    }
  });

使用 <meta> 标签重定向

通过 HTML 的 <meta> 标签实现客户端重定向，但这种方式不是真正的 301 重定向（搜索引擎可能视为 302）。

<meta http-equiv="refresh" content="0; url=https://example.com/new-page">

注意事项

• SEO 影响：纯前端方法（如 window.location）无法传递 301 状态码，搜索引擎可能视为 JavaScript 跳转而非永久重定向。
• 性能优化：301 重定向应优先通过服务器配置（如 Apache 的 .htaccess 或 Nginx 的 rewrite）实现。
• 缓存问题：浏览器可能缓存 301 重定向，测试时需清除缓存。

服务器端配置示例（补充参考）

若需标准 301 重定向，推荐在服务器配置中完成：

Apache (.htaccess)

Redirect 301 /old-page https://example.com/new-page

Nginx

location /old-page {
    return 301 https://example.com/new-page;
}