如何让JavaScript处理网站所有请求，解决单页路由刷新404问题？

你的问题是典型的单页应用路由配置问题——前端用window.history.pushState修改了URL，但服务器不知道这些路由是前端虚拟的，依然去查找对应文件/目录，导致404。要让所有请求都由JavaScript处理，核心是配置服务器将所有路由请求转发到index.html，再由前端JS根据当前URL渲染对应内容。

下面是几种常见服务器的配置方案：

Nginx #

修改Nginx配置文件（通常是nginx.conf或站点专属配置文件），添加try_files指令，让服务器优先查找真实文件/目录，找不到则返回index.html：

location / {
  try_files $uri $uri/ /index.html;
}

修改后重启Nginx生效。

Apache #

在项目根目录创建或修改.htaccess文件，添加URL重写规则：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

注意要确保Apache已开启mod_rewrite模块。

Node.js (Express) #

在Express项目中添加全局路由中间件，捕获所有非静态资源请求，返回index.html：

const express = require('express');
const path = require('path');
const app = express();

// 先处理静态资源（如CSS、JS、图片等）
app.use(express.static(path.join(__dirname, 'public')));

// 所有路由请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(3000);

前端补充逻辑 #

服务器配置完成后，需要确保前端JS在页面加载时（比如DOMContentLoaded事件触发时）读取当前URL路径，执行和点击链接时一致的路由处理逻辑，这样刷新页面才能正确渲染对应内容。示例代码：

document.addEventListener('DOMContentLoaded', () => {
  // 初始化时处理当前URL的路由
  handleRoute(window.location.pathname);
  
  // 监听浏览器前进/后退事件，同步更新页面
  window.addEventListener('popstate', () => {
    handleRoute(window.location.pathname);
  });
});

// 自定义路由处理函数
function handleRoute(path) {
  switch(path) {
    case '/':
      renderHomePage();
      break;
    case '/foo':
      renderFooPage();
      break;
    // 其他路由分支...
  }
}

这种方案无需创建多个冗余的.html文件，所有路由由前端统一处理，既解决了刷新页面的404问题，又保留了无刷新切换的性能优势。

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