如何在Nginx中配置带哈希锚点的特定页面跳转规则？

首先明确核心限制：浏览器不会将URL中的哈希锚点（#及后续内容）发送给服务器，所以Nginx无法直接通过服务器端规则匹配哈希部分，必须结合前端JS才能完成你需要的精准跳转。

以下是两种可行的实现方案：

方案一：Nginx统一跳转+前端JS处理哈希路由 #

1. 修改Nginx配置 #

先通过Nginx将所有site1.domain.com/request/路径的请求，统一跳转到新站点的跳转页面（比如site2.com/redirect.html），浏览器会自动保留原URL的哈希锚点：

server {
  listen       443;
  server_name  site1.domain.com;
  
  # 匹配/request/精确路径，跳转至新站点的跳转页面
  location = /request/ {
    return 301 https://site2.com/redirect.html$request_uri;
  }
  
  # 其他所有请求保持原有全局跳转规则
  return 301 https://site2.com$request_uri;
}

2. 前端跳转页面代码 #

在site2.com/redirect.html中添加JS代码，读取URL哈希并完成对应跳转：

const hash = window.location.hash;
let targetUrl = 'https://site2.com';

switch(hash) {
  case '#/ordering':
    targetUrl = 'https://site2.com/ordering';
    break;
  case '#/products':
    targetUrl = 'https://site2.com/products';
    break;
  case '#/distribution':
    targetUrl = 'https://site2.com/distribution';
    break;
}

// 使用replace实现301跳转语义，避免浏览器回退栈残留
window.location.replace(targetUrl);

方案二：直接在旧站点页面添加JS跳转（推荐，若旧站点可修改） #

如果旧站点的site1.domain.com/request/页面可以修改，直接在该页面的<head>中插入以下JS代码，无需调整Nginx配置（或保留原有Nginx配置即可）：

window.addEventListener('DOMContentLoaded', () => {
  const hash = window.location.hash;
  let targetUrl = 'https://site2.com';

  if (hash === '#/ordering') {
    targetUrl = 'https://site2.com/ordering';
  } else if (hash === '#/products') {
    targetUrl = 'https://site2.com/products';
  } else if (hash === '#/distribution') {
    targetUrl = 'https://site2.com/distribution';
  }

  window.location.replace(targetUrl);
});

补充说明 #

• 两种方案都能实现你需要的精准跳转逻辑，方案二更高效，无需额外跳转页面；
• 若旧站点已无法修改页面，方案一是唯一可行的服务器端配合前端的实现方式。

内容的提问来源于stack exchange，提问作者Maverick