如何通过JS获取所有输入URL的location.href？解决404重定向问题

你遇到的核心问题很明确：当访问非根路径（比如localhost:0000/details）时，服务器没有把请求转发到index.html，导致你写在index.html里的location.href代码根本没机会执行，自然没法判断URL有效性并做重定向。下面分服务器端配置和前端处理两个层面给你具体解决方案：

第一步：配置服务器，让所有请求都落到index.html #

这是解决问题的前提——只有让所有URL请求都加载index.html，你的前端JS代码才能运行并处理路由判断。

1. Nginx 配置 #

如果用Nginx托管站点，修改服务器配置文件：

server {
    listen 80; # 替换成你实际用的端口，比如8000
    server_name localhost;
    root /path/to/your/project; # 你的项目根目录路径
    index index.html;

    # 规则：先尝试访问实际文件/目录，不存在就转发到index.html
    location / {
        try_files $uri $uri/ /index.html;
    }
}

重启Nginx后，访问任何非存在的路径都会加载index.html，你的JS代码就能正常执行了。

2. Apache 配置 #

如果是Apache，在项目根目录创建（或修改）.htaccess文件，添加以下规则：

RewriteEngine On
RewriteBase /
# 排除index.html本身，避免循环
RewriteRule ^index\.html$ - [L]
# 如果请求的不是文件也不是目录，转发到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

3. 静态托管平台（Netlify/Vercel等） #

如果部署在Netlify、Vercel这类平台，用它们的专属配置文件：

• Netlify：创建_redirects文件，内容：

  /*    /index.html   200
  

• Vercel：创建vercel.json文件，内容：

  {
      "rewrites": [
          { "source": "/(.*)", "destination": "/index.html" }
      ]
  }
  

第二步：前端判断URL并处理404重定向 #

当所有请求都加载index.html后，你就可以用JS判断当前URL是否有效，并执行重定向：

纯JavaScript实现 #

适合没有用框架的静态站点：

// 先定义你的所有有效路由列表
const validRoutes = ['/', '/home', '/products', '/contact'];
const currentPath = window.location.pathname;

// 检查当前路径是否在有效路由中
if (!validRoutes.includes(currentPath)) {
    // 方式1：重定向到独立的404页面
    window.location.href = '/404.html';
    // 方式2：直接在当前页面渲染404内容（适合单页应用，避免页面刷新）
    // document.body.innerHTML = `
    //   <div style="text-align:center; margin-top:60px;">
    //     <h1>404 - Page Not Found</h1>
    //     <p>The page you're looking for doesn't exist.</p>
    //     <a href="/">Go back to homepage</a>
    //   </div>
    // `;
}

框架路由实现（React/Vue） #

如果用前端框架，可以直接借助框架的路由系统处理404：

• React Router：

  import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
  import Home from './pages/Home';
  import Details from './pages/Details';
  import NotFound from './pages/NotFound';
  
  function App() {
    return (
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/details" element={<Details />} />
          {/* 匹配所有未定义的路由，重定向到404页面 */}
          <Route path="*" element={<Navigate to="/404" replace />} />
          <Route path="/404" element={<NotFound />} />
        </Routes>
      </BrowserRouter>
    );
  }
  

• Vue Router：

  import { createRouter, createWebHistory } from 'vue-router';
  import Home from './views/Home.vue';
  import Details from './views/Details.vue';
  import NotFound from './views/NotFound.vue';
  
  const router = createRouter({
    history: createWebHistory(),
    routes: [
      { path: '/', component: Home },
      { path: '/details', component: Details },
      // 匹配所有未定义的路由
      { path: '/:pathMatch(.*)*', component: NotFound }
    ]
  });
  

这样就能确保所有无效的URL都会被正确重定向到404页面啦！

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