使用Express与Sendgrid发送邮件 解决表单跨端口提交405错误问题

问题根因 #

• 路由注册顺序错误：你将/sendemail的POST路由定义放在了app.listen()之后，Express启动服务后不会再注册后续的路由，导致该接口未生效，请求时返回405状态码
• 双服务跨域问题：你同时运行了两个独立服务，5000端口的Express服务、5500端口的静态页面服务，跨端口请求属于跨域场景，默认会被浏览器拦截
• 静态资源配置冗余：你重复定义了/public静态资源路径，单条配置即可覆盖public下所有css、fonts等资源

修复后完整server.js代码 #

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

// 如需允许跨域请求（保留原有5500静态页面服务时使用），可安装cors包后打开下方两行注释
// const cors = require('cors')
// app.use(cors())

// 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");

// 静态资源配置，单条即可覆盖public目录下所有资源
app.use("/public", express.static(path.join(__dirname, "public")));

router.get("/", function (req, res) {
  res.sendFile(path.join(__dirname, "/views/index.html"));
});

// POST路由要放在app.listen之前注册
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("/");
});

// 注册路由
app.use("/", router);

// 最后启动服务
const port = process.env.port || 5500
app.listen(port, () => {
  console.log(`Running at Port ${port}`);
});

使用说明 #

• 无需再单独启动5500端口的静态页面服务，直接运行node server.js，访问localhost:5500即可打开站点，表单提交可正常触发邮件发送
• 如果你需要保留原有5500端口的静态页面服务，可安装cors依赖npm install cors，打开代码中cors相关的两行注释，将index.html内表单的提交地址改为http://localhost:5000/sendemail，同时修改Express服务的监听端口为5000即可

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