React onSubmit 函数未命中 Express 端点（Nodemailer）答案

【问题标题】：React onSubmit function doesn't hit Express endpoint (Nodemailer)React onSubmit 函数未命中 Express 端点（Nodemailer）
【发布时间】：2018-07-14 05:32:48
【问题描述】：

我有一个表单，它提交name、email 和text。

React组件的onSubmit函数：

    onSubmit = e => {
    const { name, email, text } = this.state;

    axios.post('/feedback', { name, email, text })
          .then((result) => {
            console.log(result)
          }).catch(err => console.log(err))
}

feedback.js 文件（api/feedback.js - 如果通过 Postman 请求，它可以正常工作并发送电子邮件）：

const express = require("express");
const router = express.Router();
const nodemailer = require("nodemailer");

// @route   POST api/feedback
// @desc    Tests resource route
// @access  Public
router.post("/", function(req, res, next) {
  let output = `<p>New feedback</p>
  <h3>Feedback details</h3>
  <ul>
    <li>Name: ${req.body.name}</li>
    <li>Email: ${req.body.email}</li>
  </ul>
  <h3>Feedback message</h3>
  <p>${req.body.text}</p>
`;

  const transporter = nodemailer.createTransport({
    host: "smtp.ethereal.email",
    port: 587,
    auth: {
      user: "t4qj6mgea2kpyep7@ethereal.email",
      pass: "PASSWORD"
    },
    tls: {
      rejectUnathorized: false
    }
  });

  let mailOptions = {
    from: 'Webtool feedback: <t4qj6mgea2kpyep7@ethereal.email>', // sender address
    to: "TO@EMAIL.COM", // list of receivers
    subject: 'Feedback from Webtool', // Subject line
    text: 'Hello world', // plain text body
    html: output // html body
  };
  // send mail with defined transport object
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      return console.log(error);
    }
    console.log("Message sent: %s", info.messageId);
    console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));

  });
});

module.exports = router;

我已经将它导入到 App.js 中，并设置了反馈的路径：

const feedback = require('./routes/api/feedback');

问题是端点本身可以工作，如果我使用 Postman，我会成功收到一封电子邮件，所以我不怀疑 feedback.js 文件。但是，onSubmit() 不起作用。

【问题讨论】：

标签： reactjs express nodemailer

【解决方案1】：

您是否确保包含中间件来保护 Web 服务器？

--试试这个--

//middleware meant to protect web servers [CORS requests]
//can change '*' to 'http://localhost:3000' for local host testing

app.use((request, response, next) => {
 response.header("Access-Control-Allow-Origin", "*");
 response.header("Access-Control-Allow-Headers", "Content-Type");
 next();
 app.use(bodyParser.json())
 app.use(bodyParser.urlencoded){
 extended: false
}));

【讨论】：

【解决方案2】：

您将表单作为发布请求发送到/feedback，但在服务器端您有一个带有路由/ 的发布方法。所以，路由/feedback 不在快递中，所以它抛出找不到你的 404。尝试将服务器路由更改为 /feedback。

【讨论】：

事实并非如此，因为我使用的是Router()，并且服务器上的文件feedback.js 本身就是路径。因此，如果我指定 /feedback，它将是反馈/反馈。