bodyParser 中间件在添加静态路由时不起作用

Question

我是 express 的新手，当我创建一个简单的服务器演示时，我检测到没有发送 POST 请求。在做了一些实验之后，我发现它是 express.static 中间件，它以某种方式在干扰。我以为这是一个常见的错误，但没有设法找到线索。我的代码如下：

//jshint esversion:6
import express from "express";
import path from "path";
import { fileURLToPath } from "url";
import bodyParser from "body-parser";
import https from "https";

/* jshint ignore:start */
const __filename = fileURLToPath(import.meta.url);
/* jshint ignore:end */
const __dirname = path.dirname(__filename);

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

app.use(express.static(__dirname + "/public"));
app.use("/", bodyParser.urlencoded({ extended: true }));

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});

app.post("/", function (req, res) {
  let name = req.body.name;
  let email = req.body.email;
  let message = req.body.message;

  res.send("POST request to the homepage");
  console.log(req.body);
});

app.listen(port, () => console.log(`Listening on port ${port}!`));

我很乐意感谢任何回答或评论 :)

编辑：显然这个错误不会出现在 Firefox 上，但会出现在 Chrome 和 Edge 上

Answer 1

根据您在添加 express.static() 时甚至没有从客户端发送 POST 的症状，我猜想当您在浏览器中转到 / 路由时，express.static() 正在接收一个index.html 来自您的 public 目录，而不是您想要的 index.html：

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});

您可以通过两种方式解决此问题。要么将此 app.get("/", ...) 路由移动到 express.static() 路由之前，要么告诉 express.static 路由不为 index.html 提供服务，如下所示：

// set up static file handling, but don't serve index.html for the / request
app.use(express.static(__dirname + "/public", {index: false}));

Answer 2

好的，弄清楚是什么真正阻止了这一点。

在添加express.static()时，它为前端加载了JS，它有以下行：

$(".sendMessageBtn").attr("disabled", "true");

禁用提交按钮。事实证明，禁用它也意味着它只能在 chromium 浏览器上发送任何 BUT 内容。这在 Firefox 上不会发生。

要禁用它而不造成这种混乱，您可以替换为：

$(".sendMessageBtn").css("pointer-events", "none");

它不是通过 HTML 禁用它，而是使用 CSS

Answer 3

因此，express 静态文件服务的工作方式是您放置一个您想要服务的 /path，以及将发布到 api 的术语 express.static(/path/to/static/folder)。

否则您的整个应用程序将是静态的，因为所有内容都以 / 开头。

更多信息请见docs。

在你的情况下：

app.use("/your-static-endpoint", express.static(__dirname + "/public"));

---

关于您的代码的另一件事。 静态服务、错误处理、正文解析之类的东西称为middlewares，所以如果你想通过应用程序，您不应指定路径，因为它可能会干扰express 处理路由的方式。