请谈谈 HTTP 中的重定向，如何处理 301 和 302 重定向？

HTTP重定向深度解析：301与302的正确使用姿势

一、重定向本质解析

重定向就像快递员送快递时发现地址变更，新地址会写在包裹单的"改派地址"栏。

浏览器收到3xx状态码时，会自动前往Location头指定的新地址。

常用状态码对比：

301 Moved Permanently（永久迁移）
302 Found（临时转移，原称Moved Temporarily）
307 Temporary Redirect（严格临时重定向）
308 Permanent Redirect（严格永久重定向）

二、服务端实现示例

// Express基础示例
const express = require('express');
const app = express();

// 301永久重定向（SEO权重转移）
app.get('/old-page', (req, res) => {
  res.redirect(301, '/new-page'); // 必须显式指定301
});

// 302临时重定向（默认行为）
app.get('/temp-redirect', (req, res) => {
  res.redirect('/new-location'); // 默认302
});

// 307/308精准重定向（保持请求方法）
app.get('/strict-redirect', (req, res) => {
  res.status(307).header('Location', '/new-location').send();
});

三、前端处理机制

现代浏览器默认自动跟随重定向，但特殊场景需要手动处理：

// Fetch API手动处理重定向
fetch('/api/data', { redirect: 'manual' })
  .then(response => {
    if (response.status === 301 || response.status === 302) {
      const newUrl = response.headers.get('Location');
      window.location.href = newUrl; // 需处理相对路径
    } else {
      return response.json();
    }
  })
  .catch(error => console.error('Redirect failed:', error));

四、核心差异与使用场景

301永久重定向：

适用场景：域名更换、网站改版、URL标准化
浏览器行为：更新书签，下次直接访问新地址
SEO影响：权重转移至新地址

302临时重定向：

适用场景：A/B测试、临时活动页、登录跳转
浏览器行为：每次访问原地址都重新请求
SEO风险：可能被搜索引擎视为作弊

五、实战避坑指南

路径解析陷阱

// 错误：未处理相对路径
const newUrl = '/new-path'; // 如果原地址是 /old/path
// 正确应解析为绝对路径
function resolveRedirect(base, path) {
return new URL(path, base).href;
}

// 示例用法
const absoluteUrl = resolveRedirect('https://example.com/old/', '../new');
// 输出: https://example.com/new
重定向循环检测

// 服务端防止循环重定向
const MAX_REDIRECTS = 5;
app.use((req, res, next) => {
const redirectHistory = req.session.redirectHistory || [];

if (redirectHistory.length >= MAX_REDIRECTS) {
return res.status(508).send('Loop Detected');
}

res.redirect = function(url, status = 302) {
redirectHistory.push(req.originalUrl);
req.session.redirectHistory = redirectHistory;
res.status(status).set('Location', url).end();
};

next();
});
POST请求保护

// 307重定向保持请求方法
app.post('/submit-form', (req, res) => {
if (needsRedirect(req.body)) {
res.status(307)
.set('Location', '/new-submit-url')
.send();
} else {
// 正常处理逻辑
}
});

六、性能优化技巧

CDN缓存策略

Nginx配置301缓存

location /legacy-url {
return 301 /new-url;
add_header Cache-Control "public, max-age=31536000"; # 缓存1年
}
客户端缓存控制
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
负载均衡优化

// 分布式环境下同步重定向规则
const redis = require('redis');
const client = redis.createClient();

app.get('/dynamic-redirect/:id', async (req, res) => {
const target = await client.get(redirect:${req.params.id});
target ? res.redirect(302, target) : res.sendStatus(404);
});

七、安全防护要点

开放重定向防护

// 校验目标URL合法性
const allowedDomains = ['example.com', 'trusted-site.org'];
function isValidRedirect(url) {
try {
const parsed = new URL(url);
return allowedDomains.includes(parsed.hostname);
} catch {
return false;
}
}

app.get('/redirect', (req, res) => {
const target = req.query.url;
if (isValidRedirect(target)) {
res.redirect(302, target);
} else {
res.status(400).send('Invalid redirect target');
}
});
敏感参数处理

// 删除敏感信息再重定向
app.use('/auth-callback', (req, res) => {
const cleanUrl = new URL(req.originalUrl);
cleanUrl.searchParams.delete('token');
res.redirect(cleanUrl.toString());
});

八、调试与监控

cURL调试命令

查看完整重定向过程

curl -Lv http://example.com/old-url

限制最大重定向次数

curl --max-redirs 3 http://example.com

保持POST方法测试（-X POST -d参数）

curl -X POST -d "param=value" -Lv http://example.com/submit
前端监控实现

// 捕获重定向错误
window.addEventListener('error', (event) => {
if (event.message.includes('redirect')) {
trackError('Redirect Error', {
url: window.location.href,
destination: event.filename
});
}
});

// 性能监控重定向耗时
const navigationTiming = performance.getEntriesByType('navigation')[0];
if (navigationTiming.redirectCount > 0) {
reportMetrics({
redirectCount: navigationTiming.redirectCount,
totalTime: navigationTiming.redirectEnd - navigationTiming.startTime
});
}

九、最佳实践总结

状态码选择原则

永久迁移用301，临时跳转用302
涉及POST请求时优先使用307/308
单页应用内部路由避免使用HTTP重定向

性能优化要点

对301设置长期缓存
避免超过2次重定向链
使用CDN加速重定向响应

安全防护必须

永远不要信任用户提供的重定向地址
对敏感操作使用一次性Token
定期审计重定向规则

异常处理规范

客户端设置最大重试次数
服务端记录重定向日志

监控平台配置重定向告警

// 终极防御：全链路重定向处理
const fetchWithGuard = async (url, options = {}) => {
let redirectCount = 0;
const controller = new AbortController();

const fetchData = async (url) => {
  if (redirectCount >= 5) throw new Error('Too many redirects');
  
  const response = await fetch(url, {
    ...options,
    signal: controller.signal,
    redirect: 'manual'
  });

  if ([301, 302, 307, 308].includes(response.status)) {
    redirectCount++;
    const newUrl = response.headers.get('Location');
    return fetchData(new URL(newUrl, url).href);
  }
  
  return response;
};

return fetchData(url);

};

正确运用重定向技术可以实现：

无缝迁移网站资源
智能流量引导
灵活的业务流程控制
增强的用户体验

但需时刻警惕：

避免形成重定向黑洞
防止成为网络攻击跳板
控制性能损耗在合理范围