URL末尾带点时自定义404页面失效，如何实现全局生效？

项目中访问不存在的URL路径时，能正常跳转至自定义404页面：

但如果在路径末尾添加一个点号（比如/nonexist.），就会跳转到服务器默认错误页面而非自定义404：

问题原因 #

核心是服务器把带点号的路径识别成了静态文件请求，触发了服务器原生的错误处理逻辑，没走应用程序的自定义404路由。

分环境解决方案 #

1. Nginx 环境

修改站点配置文件（比如/etc/nginx/sites-available/your-site），调整规则覆盖所有404场景：

server {
    # 基础配置（域名、端口等）...

    # 指定自定义404页面
    error_page 404 /404.html;

    # 核心规则：所有请求优先匹配文件/目录，不匹配则转发到入口页或直接返回404
    location / {
        # 单页应用（React/Vue等）场景：转发到index.html，由前端路由处理404
        try_files $uri $uri/ /index.html;
        # 传统多页应用：直接返回自定义404
        # try_files $uri $uri/ /404.html;
    }

    # 静态文件不存在时也返回自定义404
    location ~* \.(html|css|js|png|jpeg|gif)$ {
        expires 30d;
        try_files $uri /404.html;
    }
}

修改完成后重启Nginx：sudo systemctl restart nginx

2. Apache 环境

在项目根目录的.htaccess文件中添加以下规则：

RewriteEngine On

# 匹配所有不存在的文件和目录
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 转发到自定义404页面并返回404状态码
RewriteRule ^ /404.html [L,R=404]

# 直接指定404错误页面
ErrorDocument 404 /404.html

确保Apache开启了mod_rewrite模块，重启Apache生效。

3. Node.js Express 环境

在Express应用的路由最后添加全局捕获规则，确保所有未匹配的请求都返回自定义404：

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

// 静态文件服务（放在路由之前）
app.use(express.static('public', { fallthrough: false })); // 静态文件不存在时直接进入后续中间件

// 业务路由...

// 捕获所有未匹配的路由，返回自定义404
app.use('*', (req, res) => {
    res.status(404).sendFile(path.join(__dirname, 'public/404.html'));
});

// 全局错误处理（兜底）
app.use((err, req, res, next) => {
    console.error(err);
    res.status(404).sendFile(path.join(__dirname, 'public/404.html'));
});

app.listen(3000, () => console.log('服务器启动成功'));

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