在使用 Express.js 开发前端项目时，我们经常需要处理静态文件，如 JavaScript、CSS、图片等。正确地处理静态文件是前端开发中非常重要的一部分，不但可以提高网站的加载速度，而且可以改善用户体验。本文将介绍 Express.js 中静态文件的正确处理方式，希望对前端开发者有所帮助。
Express.static 中间件
Express.js 内置了 express.static 中间件，用于处理静态文件。我们可以把静态文件所在的目录作为参数传递给它，这样在访问静态文件时，Express.js 将自动帮我们查找并返回这些文件。以下是具体的使用方式：
const express = require('express');
const app = express();
// 将静态文件所在目录传递给 express.static 中间件
app.use(express.static('public'));
// 在浏览器中访问 public 目录下的文件
// 如：http://localhost:3000/images/logo.png其中，public 是存放静态文件的目录，我们在访问静态文件时只需在路径中指定相应的文件即可。这种方式非常简单，但存在一定的安全隐患，因为所有的静态文件都可以直接访问。为了避免这种情况，我们需要限制静态文件的访问权限。
限制静态文件的访问权限
我们可以在 express.static 中间件的第二个参数中设置一些选项来限制静态文件的访问权限。以下是一些常用的选项：
maxAge：设置静态文件的缓存时间，单位为毫秒。etag：启用或禁用缓存验证，默认为 true。lastModified：启用或禁用 Last-Modified 头信息，默认为 true。setHeaders：设置响应头信息，可以自定义一些安全相关的头信息，如 CSP（内容安全策略）。
以 maxAge 和 etag 为例，我们可以这样设置：
const express = require('express');
const app = express();
// 启用缓存验证，设置缓存时间为 1 天
app.use(express.static('public', {
etag: true,
maxAge: 86400000
}));这样设置后，静态文件将在浏览器中被缓存 1 天，当再次访问相同的文件时，浏览器将检查文件是否已经被修改，如果没有修改，则从缓存中加载，否则从服务器重新下载。
Express.js 中的路由
除了静态文件，我们还可以使用 Express.js 来提供一些路由服务。路由是指我们设置的一些 API 接口，当用户访问这些接口时，服务器将返回对应的数据。以下是一个简单的示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - -------------------- --- --------- -- ---- -------- ---
在上面的代码中，我们使用 app.get 方法来定义一个 GET 请求，当用户访问根路径时，服务器将返回 Hello World!。类似地，我们还可以使用 app.post、app.put、app.delete 等方法定义其他类型的请求。
总结
以上是 Express.js 中静态文件的正确处理方式，我们首先介绍了 express.static 中间件的基本用法，然后讲解了如何限制静态文件的访问权限，最后简单介绍了 Express.js 中的路由。希望本文能够帮助读者更好地理解 Express.js 中的静态文件处理，对于前端开发者来说，正确地处理静态文件是非常重要的一部分，可以大大提高网站的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658fc5dbeb4cecbf2d559cb7