Express App 提供不需要的静态文件答案

【问题标题】：Express App Serving Unwanted Static FilesExpress App 提供不需要的静态文件
【发布时间】：2019-12-18 21:56:56
【问题描述】：

我有一个由 express 提供的 react 应用程序。整个应用程序包含在 public/index.html 中。

现在我的 server.js 看起来像这样：

  1 const express = require('express');
  2 const path = require('path');
  3 const port = process.env.PORT || 8080;
  4 const app = express();
  5
  6 // the __dirname is the current directory from where the script is running
  7 app.use(express.static(__dirname));
  8
  9 app.get('*', (req, res) => {
 10   res.sendFile(path.resolve(__dirname, 'public/index.html'));
 11 });
 12
 13 app.listen(port);

但是，不知何故，正在提供诸如 package.json 和 /.ssh/known_hosts 之类的文件，这些东西显然不应该可用。

我不确定为什么 app.get('*', (req, res)... 没有捕获所有请求，以及为什么 app.use(express.static(__dirname)); 似乎是允许我的应用服务器任何静态文件的唯一配置。

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

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

或任何我能找到的东西。

编辑---

我的项目目录如下：

/myproject
    package.json
    server.js
    /public
        index.html

我希望所有请求都只为 index.html 提供服务

我还是不明白为什么

app.use('*', express.static(path.resolve(__dirname,'/public/index.html')));

不提供任何服务。

另外，为什么在上面的例子中， res.sendFile() 没有先调用 express.static() 什么都不做。如果我删除第 7 行，则不会提供任何内容。

【问题讨论】：

标签： node.js reactjs express single-page-application

【解决方案1】：

所以，永远不要这样做：

app.use(express.static(__dirname));

在您的主服务器目录中。这会暴露所有要查看的服务器文件。

当使用express.static() 为整个目录提供服务时，您应该创建一个仅包含供公众使用的文件的目录，然后将express.static() 指向该目录。

我不确定为什么 app.get('*', (req, res)... 没有捕获所有请求

因为app.get('*', ...) 在你的express.static() 之后，所以如果express.static() 找到匹配的文件，app.get('*', ...) 甚至不会看到请求。它已被处理，路由不再继续。

一如既往地express.static() 就您应该做什么提供建议，我们需要知道您拥有的精确配置。相对于主服务器目录，您的文件系统中的公共文件在哪里？您打算在客户端中使用哪些 URL 来引用这些公共可用的文件。

这是一个理论上的例子（因为你没有提供你的细节）：

假设您有这样的文件：

/myproject
   app.js
   /public
       main.css

并且，假设您希望能够使用/main.css 作为来自客户端的 URL。为此，您只需在 app.js 中执行此操作：

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

在第一个示例中，您在顶级路径中提供这些静态文件，那么您必须确保这些顶级资源与您想要提供的任何实际路由之间没有命名冲突。

如果您希望客户端 URL 为 /assets/main.css，那么您可以这样做：

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

在此示例中，您必须确保 /public 子目录（以及它可能拥有的任何子目录）仅包含旨在可公开访问的文件。

向公共 URL 添加路径（例如 /assets）可以消除静态资产和顶级路由之间发生命名冲突的可能性。这可能是一件好事，因为在任何多人项目中，处理静态资产（如 CSS 文件）的人员与处理服务器路由的人员不同的情况并不少见，因此这两个主要人员不会直接知道什么名称彼此正在使用。在一个人的项目中，您当然可以将所有内容牢记在心，这样可以避免意外的命名冲突。

仅供参考，我对文件夹组织的偏好更像是这样：

/myproject
   /server
       app.js
   /public
       main.css

哪些是服务器文件，哪些是公共文件，这是 100% 显而易见的。然后，要在 app.js 中使用 URL 为 /assets/main.css 提供公共文件，我会这样做：

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

来自您的 cmets：

我只想为所有 ('*') GET 请求提供 public/index.html。所有其他数据来自单独的 api。似乎 res.sendFile() 不首先使用 express.static 就无法工作。上述代码位于 server.js 中

如果您只想为所有请求提供public/index.html（其中public 是app.js 所在位置下方的子目录），则完全删除express.static() 中间件。

只需在 app.js 中使用它：

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'public/index.html'));
 });

【讨论】：

我只想为所有 ('*') GET 请求提供 public/index.html。所有其他数据来自单独的 api。似乎 res.sendFile() 不首先使用 express.static 就无法工作。上面的代码驻留在 server.js 中
@C-RAD - 那你用express.static()做什么？如果您只想为所有传入请求提供public/index.html，则删除express.static()。这对那个任务毫无意义。有关更多详细信息，请参阅我在答案末尾添加的内容。
app.get('*', ... 匹配器没有它就无法工作。在上面的例子中，所有没有被第 7 行捕获的请求都被第 9 行捕获，但是如果我删除第 7 行，那么应用程序根本没有任何服务。
或者我应该说，如果没有事先使用 express.static，res.sendFile() 似乎不起作用。路线似乎正确匹配
@C-RAD - res.sendFile() 与 express.static() 完全无关。我怀疑您的 res.sendFile() 工作不正常，express.static() 正在为您发送文件。

【解决方案2】：

删除app.use(express.static(__dirname));

因为这告诉 express 加载所有存在的文件

【讨论】：

【解决方案3】：

app.use(express.static(__dirname)); 会使您的应用程序不安全。始终在控制台中打印出 URL，例如 path.resolve(__dirname, 'public/index.html')，以找出其中是否有问题。似乎针对静态文件的根目录会产生问题。将它们放在常规的公共目录中，然后再试一次

【讨论】：