错误空响应

Question

我正在尝试添加将发送到专用 gmail 帐户的联系表单。我已经让联系表格独立工作，但是当我尝试将其添加到我的工作项目中时它不起作用，我得到的错误是：

Cannot POST /api/send

该项目是一个 MERN 堆栈。下面是 mailer.js 中间件：

import nodemailer from 'nodemailer'

import config from '../config'

const transporter = nodemailer.createTransport({
    host: "smtp.gmail.com",
    port: 587,
    auth: {
      user: process.env.username,
      pass: process.env.password,
    }
});

const send = ({ email, name, text }) => {
  const from = name && email ? `${name} <${email}>` : `${name || email}`
  const message = {
    from,
    to: 'react.nodemailer@gmail.com',
    subject: `New message from ${from} at creating-contact-forms-with-nodemailer-and-react`,
    text,
    replyTo: from
  };

  return new Promise((resolve, reject) => {
    transporter.sendMail(message, (error, info) =>
      error ? reject(error) : resolve(info)
    )
  })
}

export default send

后端的server.js是：

const express = require('express');
const connectDB = require('./config/db');
const path = require('path');
// // ********************
// // CONTACT FORM 
// // ********************
const cors = require ("cors")
const nodemailer = require("nodemailer")
// // ********************
// // CONTACT FORM 
// // ********************


const app = express();

// // Connect Database
connectDB();

// Init Middleware
app.use(express.json());
// // ********************
// // CONTACT FORM 
// // ********************
app.use(cors());

app.post('/contact', (req, res) => {
  const { email = '', name = '', message = '' } = req.body

  mailer({ email, name, text: message }).then(() => {
    console.log(`Sent the message "${message}" from <${name}> ${email}.`);
    res.redirect('/#success');
  }).catch((error) => {
    console.log(`Failed to send the message "${message}" from <${name}> ${email} with the error ${error && error.message}`);
    res.redirect('/#error');
  })
})

// // ********************
// // CONTACT FORM 
// // ********************

// Define Routes
app.use('/api/users', require('./routes/api/users'));
app.use('/api/auth', require('./routes/api/auth'));
app.use('/api/profile', require('./routes/api/profile'));
app.use('/api/posts', require('./routes/api/posts'));
app.use('/api/send', require('./routes/api/send'));


// Serve static assets in production
if (process.env.NODE_ENV === 'production') {
  // Set static folder
  app.use(express.static('client/build'));

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

联系方式是：

import React, { Component } from "react";
import axios from "axios";

class ContactForm extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      email: "",
      message: "",
      status: "Submit"
    };   
  }

  handleSubmit(event) {
    event.preventDefault();  
    this.setState({ status: "Sending" });  
    axios({
      method: "POST",
      url: "api/send",
      data: this.state,
    }).then((response) => {
      if (response.data.status === "sent") {
        alert("Message Sent");
        this.setState({ name: "", email: "", message: "", status: "Submit" });
      } else if (response.data.status === "failed") {
        alert("Message Failed");
      }
    });
  }
 
  handleChange(event) {
    const field = event.target.id;
    if (field === "name") {
      this.setState({ name: event.target.value });
    } else if (field === "email") {
      this.setState({ email: event.target.value });
    } else if (field === "message") {
      this.setState({ message: event.target.value });
    }
  }

这是 api POST 路由。

var express = require('express');
var config = require('config');
var router = express.Router();


var cors = require('cors');


// @route   POST api/send
// @desc    Send email on contact page
// @access  Public

router.post('/api/send',(req, res, next ) => {
    var name = req.body.name
    var email = req.body.email
    var subject = req.body.subject
    var message = req.body.message
    var content = `
    name: ${name} \n 
    email: ${email} \n 
    subject: ${subject} \n 
    message: ${message} `

    var post = {
      from: name,
      subject: subject,
      text: content
    }
  });


  module.exports = router;

我已经尝试调试了一周左右。我目前正在尝试找出 POST 路由不起作用的原因。

我得到的错误代码是 500 internal server error 和 404 not found。它将要访问的 url 是 http://localhost:5000/api/send

Answer 1

改变

router.post('/api/send',(req, res, next )

到

router.post('/',(req, res, next )

在您的快递应用中，您已经拥有。

app.use('/api/send', require('./routes/api/send'));

因此，对于所有“/api/send”，我们将在文件“./routes/api/send”中查找。

按照您定义它的方式，您必须像 http://localhost:5000/api/send/api/send 一样查询它。

你会有

router.post('/',(req, res, next ) => {
    var name = req.body.name
    var email = req.body.email
    var subject = req.body.subject
    var message = req.body.message
    var content = `
    name: ${name} \n 
    email: ${email} \n 
    subject: ${subject} \n 
    message: ${message} `

    var post = {
      from: name,
      subject: subject,
      text: content
    }
  });


  module.exports = router;

另外，如何将路线移动到自己的文件中。即在服务器中有

app.use(require('./routes/api'));

在 ./routes/api/index.js 中有定义。即

const express = require('express');
const router = express.Router();

router.use('/api/send', require('./send'));


module.exports = router;

Answer 2

您可以直接在快递应用上注册路线，如下所示，

app.post('/api/send',function(){
//..send code
//nodemailer.send("blabla")
});

而不是在应用和路由器上注册路由。