如何在服务器端提取`<script>`标签中的`data`属性？

2024-03-17 07:35:58

服务器端提取脚本标签中的 data 属性

问题

在 Node.js 服务器上，我们有一个 index.html 文件，其中包含一个带有 data-foo="bar" 属性的 <script> 标签。为了完成服务器端操作，我们需要能够访问这个 data 属性。如何从服务器代码中获取这个值？

方法

直接从 HTTP 请求中提取 <script> 标签的 data-foo="bar" 属性是不可能的，因为属性不会包含在请求中。然而，我们可以采用一些变通方法。

使用 query 参数

一种方法是将 data 属性的值作为 query 参数传递到脚本的 src 属性中。例如：

<!-- index.html -->
<script src="http://localhost:1234?foo=bar"></script>

然后，在服务器代码中，我们可以解析 URL 并从中提取 foo 参数。

// server.mjs
const http = require("http")
const url = require("url")

const server = http.createServer((req, res) => {
  const parsedUrl = url.parse(req.url, true)
  const foo = parsedUrl.query.foo

  // 在此访问 foo 值
  console.log(foo)

  req.setHeader("Content-Type", "application/javascript")
  req.end("") // 返回一个空脚本文件
})

server.listen(1234, () => {
  console.log("服务器正在监听 http://localhost:1234")
})

使用中间件

另一种方法是使用中间件来解析 data 属性。一种流行的中间件是 express-script-data：

// server.mjs
const express = require("express")
const scriptData = require("express-script-data")

const app = express()

// 使用 express-script-data 中间件
app.use(scriptData())

app.get("/", (req, res) => {
  // 在此访问 req.scriptData
  const foo = req.scriptData["data-foo"]

  // 在此访问 foo 值
  console.log(foo)

  res.sendFile("index.html", { root: __dirname })
})

app.listen(1234, () => {
  console.log("服务器正在监听 http://localhost:1234")
})