解决 Express.js 应用程序中字体和图像文件的 404 错误

Question

我在尝试在 Express.js 应用程序中加载字体和图像文件时遇到 404 错误。我尝试了各种方法，包括在 HTML 中使用标签，但某些资源仍然无法正确提供。我需要帮助来识别和纠正问题。

问题：

我正在使用 Express.js 构建一个 Web 应用程序，并且我有一个 /public 目录，其中存储了我的静态资源（包括字体和产品图像），但有一个我没有添加的前缀，默认情况下会添加此 /产品详细信息/我不知道这是从哪里来的，只有当我使用 /:id 时才会发生这种情况。

当我访问应用程序时，某些资源加载没有任何问题，但其他资源在浏览器控制台中返回 404 错误。

我检查过的内容：

我已验证在我的 HTML 和 CSS 文件中正确指定了字体和图像文件的路径。

我已确认 /public 目录中存在字体和图像文件，且文件名和扩展名正确。

我已正确配置 Express 以使用express.static 中间件提供静态文件：

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

错误消息示例：

以下是我在浏览器控制台中遇到的一些示例错误消息：

获取http://localhost:3000/product-details/fonts/ElegantIcons.woff net::ERR_ABORTED 404（未找到） font-awesome.min.css:1 GET http://localhost:3000/product-details/fonts/fontawesome-webfont.woff2?v=4.7.0 net::ERR_ABORTED 404（未找到）

附加信息：

我尝试在 HTML 中添加标签以确保正确解析相对路径，但问题仍然存在。

我的应用程序正在 http://localhost:3000 上运行。

问题：

如何解决这些资源的 404 错误并确保 Express.js 正确提供所有字体和图像文件？我还需要检查或配置其他内容来解决此问题吗？

感谢您的协助！

Answer 1

嗨@erblin，

很久以来，我一直在使用 Express.js 并面临同样的问题，并以与您发布的类似方式解决它。所以我不确定从那时起是否有任何变化，但我仍然想建议您尝试下面提到的方法。

根据 Express.js 文档：

但是，您提供给express.static函数的路径是相对于您启动节点进程的目录的。如果您从另一个目录运行 Express 应用程序，则使用要提供服务的目录的绝对路径会更安全：

console.log('__dirname :', __dirname);
const path = require('path')
app.use('/static', express.static(path.join(__dirname, 'public')))

因此，在这里您需要检查并确认上述代码是从静态资源文件夹（例如/assets）可用的根位置执行的，否则您可以使用如下所示的相对路径。

文件夹结构可能是：

assets/
 |- Css
 |- js
 |- fonts
src/
server.js

还可以尝试使用

console.log('__dirname :', __dirname);

检查它为您的资产文件提供服务的位置。

据我所知，Express.js 服务器将尝试从服务器（执行的 server.js 文件）启动的位置查找静态资源路径。

以下是我的一个学习项目的链接。

https://github.com/JigneshRaval/express-auth-project/blob/develop/server/server.js#L179

console.log('__dirname :', __dirname);
const path = require('path');
app.use(express.static(path.resolve(__dirname, '../')));

我希望这会有所帮助。

谢谢， 吉格内什·拉瓦尔