有没有办法告诉我何时收到带有 node/express 的 ajax 请求？答案

【问题标题】：Is there a way to tell when I receive an ajax request with node/express?有没有办法告诉我何时收到带有 node/express 的 ajax 请求？
【发布时间】：2021-04-17 21:09:06
【问题描述】：

我正在运行一个发送 ajax-start.html 文件的节点/快递服务器。 ajax-start.html 文件中有一个向服务器发出ajax 请求的脚本。一切正常。但是，当服务器收到 ajax 请求时，我希望能够在发送之前修改文本文件。（我对此很陌生，并试图从 MDN 修改一个示例以满足我的需要。）

HTML (ajax-start.html)：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Ajax starting point</title>

    <style>
      html,
      pre {
        font-family: sans-serif;
      }

      body {
        width: 500px;
        margin: 0 auto;
        background-color: #ccc;
      }

      pre {
        line-height: 1.5;
        letter-spacing: 0.05rem;
        padding: 1rem;
        background-color: white;
      }

      label {
        width: 200px;
        margin-right: 33px;
      }

      select {
        width: 350px;
        padding: 5px;
      }
    </style>
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
    <h1>Ajax starting point</h1>

    <form>
      <label for="verse-choose">Choose a verse</label>
      <select id="verse-choose" name="verse-choose">
        <option>Verse 1</option>
        <option>Verse 2</option>
        <option>Verse 3</option>
        <option>Verse 4</option>
      </select>
    </form>

    <h2>The Conqueror Worm, <em>Edgar Allen Poe, 1843</em></h2>

    <pre></pre>

    <script>
      const verseChoose = document.querySelector("select");
      const poemDisplay = document.querySelector("pre");

      verseChoose.onchange = function () {
        const verse = verseChoose.value;
        updateDisplay(verse);
      };

      function updateDisplay(verse) {
        verse = verse.replace(" ", "");
        verse = verse.toLowerCase();
        let fname = verse + ".txt";
        let url = `textFiles/${fname}`;

        let request = new XMLHttpRequest();
        request.open("GET", url);
        request.responseType = "text";

        request.onload = function () {
          poemDisplay.textContent = request.response;
        };
        request.send();
      }
    </script>
  </body>
</html>

节点/express(app.js)

const express = require("express");
const fs = require("fs");
const app = express();
app.use(express.static(`assets`));

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

app.listen(5000, () => {
  console.log(`listening`);
});

【问题讨论】：

您可以查看X-Requested-With 标头。对于 AJAX，它将是 XMLHttpRequest。
@Barmar — 这是一个非标准标头，只有一些第三方 Ajax 库添加。
为什么需要区分AJAX？只需为它们使用不同的端点。
"一切正常" - textFiles/ 端点在哪里？这些文件当前是否由express.static 提供？
@Barmar ---- 这个想法是，如果我能分辨出请求是 ajax，我可以在通过 AJAX 发送文件之前修改文件。

标签： javascript node.js ajax express fs

【解决方案1】：

无法检测 Ajax 请求本身，但 HTTP 有许多选项可用于提供不同版本的内容。

如果您想以不同的格式提供相同的数据（例如，直接请求的 HTML 和 Ajax 请求的 JSON 很常见），那么您可以使用Accept header（与您的服务器端默认为 HTML 的代码，除非 Accept 标头（可通过 req.headers 获得）表示对 JSON 的偏好）。

如果您想提供细微不同的内容，则可以在 URL 上使用查询字符串 (req.query)。

明显不同的内容通常最好使用完全不同的端点。

您也可以使用非标准的X-Requested-With，但您可以将它（如Accept 标头）与setRequestHeader 一起添加，因为这是表达“这是Ajax”的常用模式.不过它确实避免了标准方法，所以我不推荐它。

【讨论】：

即使问题标题要求“告诉我何时收到 ajax 请求”，OP 的实际问题是“我希望能够修改文本发送之前的文件“。
@Bergi — 他们说他们想这样做，但所述问题是检测 Ajax 请求……修改文本文件大概是他们计划在问题解决后做的事情（大约他们没有提供任何细节，所以无论如何都无法回答）。