使用Nodemailer开发联系表单时出现Cannot /POST错误是什么原因？

云原生阿岚

2026-9-28

问题排查与修复步骤

端口不匹配问题
你的Node.js后端服务监听的端口是4000，但前端axios请求的地址写的是localhost:3000/contact_us，3000一般是React开发服务的端口，后端根本没有在这个端口暴露接口，自然会返回404的Cannot POST错误。你需要把前端axios请求的url改为http://localhost:4000/contact_us。
提交事件绑定错误
表单的onSubmit事件应该绑定在<form>标签上，你现在绑在了提交按钮上，点击按钮时自定义的提交逻辑不会触发，表单会走默认的原生POST提交行为，你没有给form设置action属性，所以直接触发错误。修改方式：把按钮上的onSubmit={this.submitEmail}移到<form>标签上。
后端缺失请求体解析中间件
你的Express代码没有加JSON请求体解析的中间件，后端收到POST请求后无法解析请求体的JSON数据，req.body会是undefined。需要在你的index.js里CORS配置的前后加一行app.use(express.json())。
请求地址缺失协议头
前端axios的url没有加http://协议头，部分浏览器会将其识别为相对路径，导致请求地址错误，修正后的axios配置如下：
```
axios({
  method: "POST", 
  url:"http://localhost:4000/contact_us", 
  data:  this.state
})
```
配置项缺失问题
你现在的Nodemailer配置里，transporter的user、pass字段，还有邮件配置的to字段都是空的，修复完前面的问题后，需要把这些字段替换为你自己的Mailtrap授权凭证和收件邮箱地址，否则邮件发送会失败。