在JavaScript中理解301和302重定向，需要先明确它们本质上是HTTP状态码，用于指示浏览器进行页面跳转。虽然这些状态码本身由服务器发送，但JavaScript可以通过多种方式与之交互或触发重定向行为。下面从基础概念到实际应用进行详细解释：

一、301和302重定向的基础定义

1. 301 Moved Permanently（永久重定向）

  • 定义 ：表示请求的资源已被 永久 移动到新位置，未来所有对此资源的请求都应使用新的URL。

  • 核心特性 ：重定向信息会被浏览器缓存，后续请求将直接访问新URL，无需再次经过服务器。

2. 302 Found（临时重定向）

  • 定义 ：表示请求的资源 临时 移动到新位置，未来仍可能恢复使用原URL。

  • 核心特性 ：默认情况下不会被浏览器缓存（除非设置了特殊缓存头），每次请求仍会经过服务器。

二、301和302重定向的关键区别

三、JavaScript中与重定向相关的操作

JavaScript虽然不能直接设置HTTP状态码（这是服务器的职责），但可以通过以下方式触发或处理重定向：

1. 通过 window.location 触发客户端重定向

JavaScript可以通过修改window.location对象来触发浏览器的页面跳转，这种跳转是在客户端完成的，不属于HTTP 301/302重定向（因为没有经过服务器响应），但效果类似。

// 示例1：直接设置新URL（类似302临时跳转的效果）
window.location.href = 'https://example.com/new-page';

// 示例2：使用replace方法（替换当前历史记录，用户无法通过后退按钮返回原页面）
window.location.replace('https://example.com/new-page');
2. 处理服务器返回的301/302重定向

浏览器会自动处理服务器返回的301/302状态码，但JavaScript可以通过监听相关事件或检查重定向历史来间接感知：

// 示例：监听页面加载完成事件，检查当前URL是否与预期一致
window.addEventListener('load', function() {
  if (window.location.href !== initialUrl) {
    console.log('页面可能发生了重定向');
  }
});

// 使用Performance API检查重定向信息
if (window.performance) {
  const entries = performance.getEntriesByType('navigation');
  if (entries.length > 0) {
    console.log('重定向次数:', entries[0].redirectCount);
    console.log('重定向耗时:', entries[0].redirectEnd - entries[0].redirectStart, 'ms');
  }
}
3. 使用Fetch API处理重定向

默认情况下，Fetch API会自动跟随重定向，但可以通过配置redirect选项来控制行为：

// 示例：使用Fetch API并控制重定向行为
fetch('https://example.com/old-page', {
  redirect: 'follow' // 默认值，自动跟随重定向
})
.then(response => {
  console.log('最终URL:', response.url); // 输出最终重定向到的URL
});

// 阻止跟随重定向，获取原始重定向响应
fetch('https://example.com/old-page', {
  redirect: 'manual'
})
.then(response => {
  if (response.status === 301 || response.status === 302) {
    const redirectUrl = response.headers.get('Location');
    console.log('重定向目标:', redirectUrl);
  }
});

四、实际应用场景与最佳实践

1. 301重定向适用场景：

  • 网站域名更换（如从 example.com 迁移到 newexample.com ）。

  • 网页永久删除并替换为新页面。

  • 规范URL（如统一使用HTTPS或www前缀）。

 

2. 302重定向适用场景：

  • 网站临时维护，将用户跳转到公告页面。

  • 电商网站的临时活动页面跳转。

  • 用户未登录时跳转到登录页面。

 

3. JavaScript中处理重定向的注意事项：

  • 使用 window.location.replace() 避免在用户历史记录中留下原页面。

  • 对于重要的重定向，建议在服务器端设置301/302状态码（而非纯客户端JavaScript跳转），以保证SEO友好性。

  • 使用Fetch API时注意配置 redirect 选项以满足特定需求。