将数据从 EJS 发布到 Node.js答案

【问题标题】：Posting data from EJS to Node.js将数据从 EJS 发布到 Node.js
【发布时间】：2021-05-24 00:41:33
【问题描述】：

我有一个由 koa/Node.js 应用程序渲染的 index.html EJS，其中包含一个 javascript sn-p，用于将有关当前页面的数据发布到同一个应用程序，端点保存在数据库中。

javascript 代码（AJAX fetch POST）到达 Node.js 端点，但不传输任何数据。我在代码中没有看到任何拼写错误。

[更正] 确实是bodyparser的错字

# index.js
const Koa = require("koa");
const path = require("path");
const render = require("koa-ejs");
const bodyParser = require("koa-bodyparser");
const router = require("./routes/routes.js");

const app = new Koa();

render(app, {
  root: path.join(__dirname, "/views"),
  layout: false,
  viewExt: "html",
});

app
  .use(bodyParser())
  .use(router.routes())
  .use(router.allowedMethods())
  .use(staticCache("./images", { maxAge: 600000 }))
  .listen(PORT, () => {
    console.log(`Running on port ${PORT}`);
  });

在 index.html 中，我有一个按钮可以触发对 koaRouter 端点 (/node/insert) 的 POST 请求。操作是将有关当前页面的信息（例如，document.location.href）保存在 Postgres 数据库中。

# /views/index.html
[...]
<form id="newRow">
  <input type="submit" value="New row">
</form>
[...]
<script type="module" src="fetch.js" async></script>

地点：

# /views/fetch.js
const data = {
  app: "Node",
  url: document.location.href,
  ...
};

document.getElementById("newRow").addEventListener("submit", (e) => {
  e.preventDefault();
  fetch("/node/insert", {
    method: "POST",
    headers: {
      "Content-Type": "application/json; charset-UTF-8",
    },
    body: JSON.stringify(data),
  })
    .then((res) => {
      if (res.ok) {
        return res.json();
      }
      return Promise.reject(res);
    })
    .then((res) => console.log("front", res))
    .catch((err) => console.warn(err));

在路由中，我定义了一个端点/node/insert来响应这个动作：

# routes.js
const koaRouter = require("koa-router");
const router = new koaRouter();

router.post("/node/insert", async (ctx) => {
  console.log("posted", ctx.request.body);   
   ^^^  "posted" is positively printed in terminal after submit

  if (ctx.request.body) {
     return (ctx.response.status = 200)
  } else {
    return (ctx.response.status = 404); <-- check
  }
})

到达端点“/node/insert”，因为我可以肯定地 console.log，但正文没有传递到端点：ctx.request.body = {}。我有以下错误：

"SyntaxError: Unexpected token O in JSON at position 0"

从 fetch.js 中检测到（可能是因为正文是{}？）。

我看不出有什么问题。

注意：Node 应用程序在容器 (pm2-runtime start index.js) 中运行，并使用 Nginx 作为反向代理、静态文件服务器和负载均衡器`

【问题讨论】：

您在寻找正文解析器中间件吗？
我确实尝试使用“bodyparser=require('koa-bodyparser')”添加“app.use(bodyparser())”，但这给了我一个无法修复的错误：“意外位置 0 处的 JSON 中的标记 O"
Koa 路由是 "routes.js" 文件中的 "router.post("/node/insert", ...)"。然后这是使用容器运行的，所以我相信 url 没问题（如果我插入“console.log”，“post”端点会在终端中做出积极响应，但主体是“{}”）。我添加了 404 以显示“ctx.requeset.body”为空
My question turned out to be a rather esoteric typo — what should I do/what should be done?

标签： node.js ejs fetch-api

【解决方案1】：

试试：

const koaJson = require(koa-json);
app.use(koaJson());

【讨论】：

这没有任何作用。我明白这只是一个“漂亮”
根据发帖者的说法，问题是由拼写错误引起的。

【解决方案2】：

正如 Evert 指出的那样，只是 bodyparser 中的一个错字和中间件的错误定位

curl --data "app=Node" HTTP://localhost:8000/node 正常响应。

【讨论】：