问题描述
我最近在我的服务器中添加了 express-static-gzip,并且在提交表单时注意到我的 req.body 在我的 router.post 中未定义。
以前它可以正常工作,但现在我收到 POST 500 内部服务器错误,无法读取未定义的属性“名称”和未捕获(承诺)语法错误:意外令牌
这是我提交的表单:
const handleSubmit = async (e) => {
e.preventDefault();
setStatus("Sending...");
const { name,email,message } = e.target.elements;
let details = {
name: name.value,email: email.value,message: message.value,};
console.log(typeof JSON.stringify(details))
let response = await fetch("/api/v1/mail",{
method: "POST",headers: {
"Content-Type": "application/json;charset=utf-8"
},body: JSON.stringify(details),});
setStatus("Send Message");
let result = await response.json();
alert(result.status);
};
这是我的服务器设置,有问题的路由是“/api/v1/mail”:
const express = require('express')
const path = require('path')
const router = express.Router();
const cors = require("cors");
var expressstaticGzip = require("express-static-gzip")
const mailRoutes = require('./routes/mail');
const server = express()
server.use('/api/v1/mail',mailRoutes)
server.use(cors())
server.use(express.json())
server.use("/",router)
server.use(expressstaticGzip(path.join(__dirname,'public'),{
enablebrotli: true
}))
server.use(express.static(path.join(__dirname,'public')))
这是我的 POST 请求:
router.post("/",(req,res) => {
const name = req.body.name;
const email = req.body.email;
const orderId = req.body.orderId
const message = req.body.message;
const mail = {
from: name,to: "info@example.com ",subject: "Contact Form Submission",html: `<p>Name: ${name}</p>
<p>Email: ${email}</p>
<p>Order ID: ${orderId}
<p>Message: ${message}</p>`,};
contactEmail.sendMail(mail,(error) => {
if (error) {
res.json({ status: "ERROR",req});
} else {
res.json({ status: "Message Sent" });
}
});
});
})
解决方法
如果您尝试使用 req.body.name
的路线是这样的:
server.use('/api/v1/mail',mailRoutes)
然后,你必须移动这个:
server.use(express.json())
在路由定义之前。
实际上,您正在尝试在中间件读取和解析 JSON 之前处理路由请求。路由处理程序和中间件按照它们注册的顺序进行匹配和执行。因此,任何需要执行以使路由处理程序起作用的中间件都必须在注册路由处理程序本身之前进行注册。