Nodejs express碰到一个很奇怪的问题，不知各位大神有没有遇到过？

Nodejs express碰到一个很奇怪的问题，不知各位大神有没有遇到过？

GET http://localhost:3000/product/css/reset.css 404 (Not Found) sdf:13 GET http://localhost:3000/product/css/bootstrap.min.css 404 (Not Found) sdf:14 GET http://localhost:3000/product/css/bootstrap-responsive.css 404 (Not Found) sdf:15 GET http://localhost:3000/product/css/docs.css 404 (Not Found)

我在模板里面a标签写了<a href="/product/{{_id}}" class="home-title"></a>，对应的路由可以获取到数据，但是加载静态资源的时候为什么会从product开始获取，而不是定义好的public，如果把product/{{_id}}改成productabc/{{_id}}那么就会从productabc获取，很奇怪。不知道为什么，求解!


4 回复

这个问题涉及到Express框架中静态文件的处理方式。通常情况下，Express通过express.static中间件来提供静态文件服务。你提到的情况表明，你的应用可能没有正确配置静态文件的路径，导致Express无法找到这些文件。

示例代码

首先，我们需要确保在Express应用中正确地配置了静态文件目录。假设你的静态文件（如CSS、JavaScript文件）存放在public目录下。

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

const app = express();

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

// 路由示例
app.get('/product/:id', (req, res) => {
    const { id } = req.params;
    // 处理产品详情逻辑
    res.send(`Product ID: ${id}`);
});

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

解释

  1. 静态文件配置：

    • 使用express.static中间件来指定静态文件的根目录。在这个例子中，静态文件存放在项目根目录下的public目录。
    • path.join(__dirname, 'public')生成正确的文件路径。

  2. 路由配置：

    • 定义了一个路由/product/:id，用于处理带有ID的产品详情页面。
    • 在模板中使用href="/product/{{_id}}"来指向这个路由。

问题分析

  • 当你在模板中使用<a href="/product/{{_id}}" class="home-title"></a>时，浏览器会请求/product/<_id>路径下的资源。
  • 如果静态文件不在默认的根目录（即/），你需要确保静态文件路径配置正确，使得Express能够正确找到并提供这些文件。

解决方案

  • 确保你的静态文件路径配置正确，例如public目录应该包含所有需要的静态资源。
  • 检查模板中的链接是否正确引用了静态资源。如果静态资源位于/product/css目录下，你可能需要调整静态文件路径配置或修改模板中的链接。

通过上述配置，你应该能够解决404错误，并且静态资源能够被正确加载。


弄弄 staticfile 的设置就好了吧

app.use('/product', express.static(__dirname + '/public'));

或者资源地址改成

http://localhost:3000/css/reset.css

根据你的描述，问题可能是由于Express的静态文件服务配置不正确导致的。默认情况下，Express的静态文件中间件会将public目录下的文件作为静态资源提供。你需要确保静态资源路径与你的请求路径匹配。

示例代码

假设你的项目结构如下：

project-root/
├── app.js
└── public/
    ├── css/
    │   ├── reset.css
    │   ├── bootstrap.min.css
    │   ├── bootstrap-responsive.css
    │   └── docs.css

在app.js中配置静态文件服务：

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

const app = express();

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

app.get('/product/:id', (req, res) => {
  const productId = req.params.id;
  // 处理获取产品数据的逻辑
  res.send(`Product details for ${productId}`);
});

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

解释

  1. 设置静态文件目录：

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

    这行代码告诉Express将public目录下的文件作为静态资源提供。

  2. 路由处理：

    app.get('/product/:id', (req, res) => {
  const productId = req.params.id;
  res.send(`Product details for ${productId}`);
});

    这里定义了一个路由来处理产品详情页面。

静态资源路径问题

如果你在HTML模板中引用静态资源，例如CSS文件，应该使用相对路径或绝对路径：

<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-responsive.css">
<link rel="stylesheet" href="/css/docs.css">

这样，Express会从public目录下查找这些文件。

通过以上配置，你应该能够解决静态资源加载404的问题。如果还有其他问题，请检查路径配置是否正确。

回到顶部