Nodejs Express中使用app.all('*',)设置404页面，样式和js外链也跳转问题

Nodejs Express中使用app.all(’’,)设置404页面，样式和js外链也跳转问题

我是新手，用Express做路由配置时，使用 app.all(’’, function(req,res){ res.render(“404”); });

结果我head中的 <link rel=“stylesheet” href=“stylesheets/style.css”>

样式也都跳转到了404页面，请问这个问题怎么解决？

2 回复

Node.js Express中使用app.all('*', ...)设置404页面，样式和JS外链也跳转问题

问题描述

我在使用Express框架进行路由配置时，尝试通过app.all('*', ...)来设置一个全局的404错误处理页面。具体代码如下：

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

然而，在这种方式下，即使访问不存在的资源，页面内的样式表（例如<link rel="stylesheet" href="stylesheets/style.css">）也会被解析为404错误，导致页面样式丢失。

解决方案

为了正确处理404错误并确保静态文件能够正常加载，你可以将静态文件的中间件放在404错误处理中间件之前。这样可以确保Express首先尝试匹配静态文件路径，如果找不到静态文件，则会触发404错误处理。

以下是具体的解决方案步骤：

  1. 配置静态文件服务：使用express.static中间件来提供静态文件。
  2. 定义404错误处理：使用app.use来定义全局的404错误处理函数。
示例代码
const express = require('express');
const path = require('path');

const app = express();

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

// 定义404错误处理中间件
app.use((req, res, next) => {
    // 如果请求未匹配到任何路由，则渲染404页面
    res.status(404).render("404");
});

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

解释

  1. app.use(express.static(path.join(__dirname, 'public')));

    • 这行代码指定了Express如何查找静态文件。在这个例子中，静态文件位于项目的public目录下。
    • public目录应该包含你的CSS、JavaScript和其他静态文件。

  2. app.use((req, res, next) => { ... });

    • 这是一个全局的错误处理中间件。当Express找不到匹配的路由时，它会调用这个中间件，并且状态码会被设置为404。
    • 使用res.status(404).render("404");来渲染一个自定义的404页面。

通过这种方式，你可以确保静态文件能够正确加载，同时也能正确处理404错误。


在使用 app.all('*', ...) 设置全局404页面处理时，确实会将所有未匹配到的路由都导向404页面。这会导致你的静态文件（如CSS、JS）也被错误地重定向。

要解决这个问题，你可以通过以下几种方式：

方法一：明确指定静态文件路径

确保你在应用中间件之前定义静态文件服务，这样Express可以先匹配静态文件路径，再匹配其他路由。

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

const app = express();

// 在所有路由之前设置静态文件服务
app.use(express.static(path.join(__dirname, 'public')));

// 全局404处理
app.all('*', (req, res) => {
    res.status(404).render("404");
});

app.listen(3000, () => console.log('Server is running on port 3000'));

确保你的HTML文件中引用的CSS或JS文件路径正确，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
    <!-- Your content here -->
</body>
</html>

方法二：使用app.use()和app.get()

另一种方法是明确使用 app.use() 来定义静态文件服务，并使用 app.get('*') 来处理404错误。

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

const app = express();

// 设置静态文件服务
app.use(express.static(path.join(__dirname, 'public')));

// 处理GET请求的所有未匹配路由
app.get('*', (req, res) => {
    res.status(404).render("404");
});

app.listen(3000, () => console.log('Server is running on port 3000'));

以上两种方法都可以确保静态文件被正确加载，而不会被错误地重定向到404页面。希望这能解决你的问题！

回到顶部