Nodejs 404错误时显示一个指定的页面

我把下面这代码放到所有的router的最下面，想对无法处理的路径显示一个404页面

app.all('*', function(req, res) {
   //static resource
          		res.render("404");
});

可是这样请求静态资源的时候也会走这个处理，这样的话css,javascript,image无法正常输出，

静态资源请求路径是这样的：

/stylesheets/style.css
/javascript/demo.js
.......

我应该怎么判断呀？

wuwangju 1楼•1 个月前

要在 Node.js 中正确处理 404 错误，并确保静态资源能够正常访问，你需要对路由逻辑进行一些调整。以下是一个改进后的示例，展示了如何实现这一功能。

示例代码

首先，确保你已经安装了 Express 框架（如果你还没有安装的话）：

npm install express

然后，在你的应用中设置静态文件目录和 404 处理程序：

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

// 设置静态资源目录
app.use(express.static('public'));

// 路由定义
app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.get('/about', (req, res) => {
    res.send('About page');
});

// 404 处理程序
app.use((req, res, next) => {
    if (res.headersSent) {
        return next(new Error('Headers already sent'));
    }
    res.status(404).render('404'); // 渲染 404 页面
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

解释

设置静态资源目录：
- app.use(express.static('public')) 这行代码告诉 Express 在 public 目录下查找静态资源（如 CSS、JavaScript 文件等）。
- 确保你的静态资源文件（如 style.css, demo.js）放在项目中的 public 目录下。
定义路由：
- 使用 app.get() 定义了两个简单的路由 / 和 /about。
- 这些路由会处理特定的 URL 请求，并发送相应的响应。
404 处理程序：
- app.use() 用于创建一个中间件函数，它会在所有其他路由之后执行。
- 如果请求的路径没有匹配任何已定义的路由，则会进入这个中间件。
- 使用 res.status(404).render('404') 来渲染一个 404 页面。你需要确保有一个名为 404.ejs 或 404.pug 的模板文件存在于视图目录中。
启动服务器：
- 最后，启动服务器并监听指定端口。

通过这种方式，你可以确保当请求的路径不存在时，会显示一个自定义的 404 页面，而不会影响静态资源的加载。

zlyuanteng 2楼•1 个月前

将静态资源目录从路径控制中排除

app.use(express.static(path.join(__dirname, 'stylesheets')));
app.use(express.static(path.join(__dirname, 'javascript')));

htzhanglong 3楼•1 个月前

要解决这个问题，你需要区分处理动态路由和静态资源请求。可以通过检查请求的路径是否指向静态文件目录来避免静态资源被错误地处理为404页面。以下是一个示例代码，展示了如何正确设置静态资源路径并处理404错误。

示例代码

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

const app = express();

// 设置静态资源目录
app.use('/static', express.static(path.join(__dirname, 'public')));

// 处理所有其他路由的404错误
app.use((req, res, next) => {
    if (req.path.startsWith('/static')) {
        // 如果请求路径以 /static 开头，则直接调用下一个中间件
        return next();
    }
    // 对于非静态资源的其他请求，返回404页面
    res.status(404).render('404');
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

设置静态资源目录：
```
app.use('/static', express.static(path.join(__dirname, 'public')));
```
这行代码告诉Express在哪里查找静态资源（如CSS、JS文件）。public 目录中的文件可以被直接访问，例如通过 /static/stylesheets/style.css。
处理404错误：
```
app.use((req, res, next) => {
    if (req.path.startsWith('/static')) {
        return next();
    }
    res.status(404).render('404');
});
```
- app.use() 中间件会检查请求路径是否以 /static 开头。如果是，它会调用 next() 让Express继续处理后续的中间件或路由。
- 如果不是静态资源请求，Express将返回一个404状态码，并渲染一个名为 404 的模板。

这样设置后，静态资源能够正常输出，而所有无法匹配任何路由的请求则会被重定向到404页面。