使用 Express Static 提供 SVG 文件

Question

在我的 Express 应用程序中，我试图从服务器端在客户端显示 svg。我提供的 SVG 来自目录 /svg_library，其中包含 3 个 svg：

/svg_library

svg1.svg
svg2.svg
svg3.svg

为了向客户提供 svg1.svg，我使用 app.use(express.static('svg_library'))。

客户端随后可以访问 localhost:3000/svg1.svg。

问题 1：如何 仅提供一个 文件 (svg1.svg)，以便用户无法访问其他文件 (svg2.svg 和 svg3.svg) 在 svg_library?

问题 2：从效率和安全的角度来看，使用 express.static 还是直接在 http 响应中提供 svg 更好（将 content-type 更改为 img/svg+xml)?

Answer 1

Q1答案：可以创建一个中间件来过滤静态资源。

例如

import express from 'express';
import path from 'path';

const app = express();
const port = 3000;

const ignoreFiles = ['/svg2.svg', '/svg3.svg'];

app.use(function (req, res, next) {
  console.log(req.url);
  if (ignoreFiles.includes(req.url)) {
    return res.sendStatus(403);
  }
  next();
});
app.use(express.static(path.resolve(__dirname, 'svg_library')));

app.listen(port, () => console.log(`HTTP server is listening on http://localhost:${port}`));

通过 curl 测试：

⚡  curl http://localhost:3000/svg1.svg                              
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  Sorry, your browser does not support inline SVG.  
</svg> %                                                                                                                                    
⚡  curl http://localhost:3000/svg2.svg
Forbidden%                                                                                                                                  
⚡  curl http://localhost:3000/svg3.svg
Forbidden%

Q2 的答案：来自 Serving static files in Express 文档：

For best results, use a reverse proxy cache to improve the performance of serving static assets.

另外，看到这个

express.static vs. res.sendFile

使用 Express Static 提供 SVG 文件

Using Express Static to serve SVG files

svg

httpresponse

http-headers

node.js

express