Express结合Sendgrid实现表单发邮件提交返回404问题求助

问题修复方案 #

核心错误原因 #

你遇到的404问题是由以下几个明显的代码错误导致的：

• 路由注册顺序错误：Express要求所有路由规则必须在app.listen()启动服务之前完成注册。你当前把app.post("/sendemail")写在了app.listen()之后，服务启动时没有加载这个路由，自然访问不到。
• 静态资源路径拼接错误：你重复定义了多次/public静态资源规则，后面三个针对单个文件的规则拼接路径时没有加路径分隔符，会导致资源解析失败，属于冗余错误代码，可以直接删除。
• 冗余router实例无配置：你定义了express.Router实例并挂载到根路径，但没有给router配置任何路由规则，属于无效代码。

修正后的server.js代码 #

// Send email after that form is submitted
const express = require("express");
const app = express();
const path = require("path");

// Import sendEmail function from utils/sendEmail
const sendEmail = require("./utils/sendEmail");

// Middleware
app.use(express.urlencoded({ extended: false }));

// view engine setup
app.set("view engine", "html");
app.engine("html", require("ejs").renderFile);

// Change views path folder
app.set("views", path.join(__dirname, "/"));

// Use Static folder，这一行就足够匹配所有public目录下的资源请求
app.use("/public", express.static(path.join(__dirname, "public")));

// ---------------------------------------------------------------
// 路由统一放在listen之前
//Create the route and render the index.html file
app.get("/", function (req, res) {
  res.render("index.html");
});

app.post("/sendemail", (req, res) => {
  const { nome, email, telefono, data, deadline, messaggio, budget, gdpr } =
    req.body;

  const from = "Irene@liberamente.site";
  const to = "irenetestarella.it@gmail.com";

  const subject = "Nuovo Prospect";

  const output = `
  <p> Un nuovo prospect ha appena compilato il form sul sito Liberamente </p>

  <h3>Dettagli prospect: </h3>
  <ul>
      <li>Nome: ${nome} </li>
      <li>Email: ${email} </li>
      <li>Telefono: ${telefono} </li>
      <li>Data ed ora preferita: ${data} </li>
      <li>Deadline: ${deadline} </li>
      <li>Messaggio: ${messaggio} </li>
      <li>Budget: ${budget} </li>
      <li>Consenso informato GDPR: ${gdpr} </li>
  </ul>
  `;

  sendEmail(to, from, subject, output);
  res.redirect("/");
});
// ---------------------------------------------------------------

// 启动服务放在所有路由注册之后
const PORT = process.env.port || 5500;
app.listen(PORT, () => console.log(`Server running on Port ${PORT}`));

额外检查项 #

修改代码重新部署后如果还有问题，可以检查下index.html里表单标签的配置，确保action属性值为/sendemail、method属性值为post即可。

内容的提问来源于stack exchange，提问作者FrankPicci