提交后，盖茨比联系表格“挂起”

Question

我在gatsby网站上有一个联系表，该表单是用react-final-form创建的。 一切正常，并且邮件已发送，但是当我按下“提交”按钮后，它保持灰色一段时间，最后回到正常状态时，我在控制台中收到此错误：

[0] BadRequestError: request aborted
[0]     at IncomingMessage.onAborted (/Users/denis/Desktop/gatsby/node_modules/body-parser/node_modules/raw-body/index.js:231:10)
[0]     at IncomingMessage.emit (events.js:182:13)
[0]     at abortIncoming (_http_server.js:444:9)
[0]     at socketOnClose (_http_server.js:437:3)
[0]     at Socket.emit (events.js:187:15)
[0]     at TCP._handle.close (net.js:599:12)
error Error when trying to proxy request "/api/send" to "http://localhost:3000/api/send"

可能是个问题吗？

这是我的表格：

import { Form, Field } from 'react-final-form';
import axios from 'axios'
import { TextField, Select } from 'final-form-material-ui';
import {
  Grid,
  Button,
  MenuItem
} from '@material-ui/core';


const onSubmit = async values => {
    await axios.post('/api/send', {values})
};

const validate = values => {
  const errors = {};
  if (!values.firstName) {
    errors.firstName = 'Required';
  }
  if (!values.lastName) {
    errors.lastName = 'Required';
  }
  if (!values.email) {
    errors.email = 'Required';
  }
  return errors;
};

const Contact = ({firstName, lastName, email, phone, notes, city}) => (
      <Form
        onSubmit={onSubmit}
        initialValues={{}}
        validate={validate}
        render={({ handleSubmit, reset, submitting, pristine, values }) => (
          <form onSubmit={handleSubmit} noValidate>
              <Grid container alignItems="flex-start" spacing={8}>
                <Grid item xs={6}>
                  <Field
                    fullWidth
                    required
                    name="firstName"
                    component={TextField}
                    type="text"
                    label="First Name"
                  />
                </Grid>
                <Grid item xs={6}>
                  <Field
                    fullWidth
                    required
                    name="lastName"
                    component={TextField}
                    type="text"
                    label="Last Name"
                  />
                </Grid>
                <Grid item xs={12}>
                  <Field
                    name="email"
                    fullWidth
                    required
                    component={TextField}
                    type="email"
                    label="Email Address"
                  />
                </Grid>
                <Grid item xs={6}>
                  <Field
                    fullWidth
                    required
                    name="phone"
                    component={TextField}
                    type="text"
                    label="Phone Number"
                  />
                </Grid>
                <Grid item xs={6}>
                  <Field
                    fullWidth
                    name="city"
                    component={Select}
                    label="Select a City"
                    formControlProps={{ fullWidth: true }}
                  >
                    <MenuItem value="London">London</MenuItem>
                    <MenuItem value="Paris">Paris</MenuItem>
                    <MenuItem value="Belgrade">Belgrade</MenuItem>
                  </Field>
                </Grid>
                <Grid item xs={12}>
                  <Field
                    fullWidth
                    name="notes"
                    component={TextField}
                    multiline
                    label="Message"
                  />
                </Grid>
                <Grid item style={{ marginTop: 16 }}>
                  <Button
                    type="button"
                    variant="contained"
                    onClick={reset}
                    disabled={submitting || pristine}
                  >
                    Reset
                  </Button>
                </Grid>
                <Grid item style={{ marginTop: 16 }}>
                  <Button
                    variant="contained"
                    color="primary"
                    type="submit"
                    disabled={submitting}
                  >
                    Submit
                  </Button>
                </Grid>
              </Grid>
          </form>
        )}
      />
)

export default Contact

...这是我的服务器：

const express = require("express")
const bodyParser = require("body-parser")
const nodemailer = require("nodemailer")

const app = express()

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post("/api/send", (req, res) => {
  async function main() {
    const output = `
            <h3>Contact details</h3>
            <ul>
              <li>First Name: ${req.body.values.firstName}</li>
              <li>Last Name: ${req.body.values.lastName}</li>
              <li>Email: ${req.body.values.email}</li>
              <li>Phone: ${req.body.values.phone}</li>
              <li>City: ${req.body.values.city}</li>
            </ul>
            <h3>Message</h3>
            <p>${req.body.values.notes}</p>
          `

    let transporter = nodemailer.createTransport({
      host: "smtp.mail.yahoo.com",
      port: 587,
      secure: false,
      auth: {
        user: "user_email",
        pass: "user_password",
      },
    })

    let info = await transporter.sendMail({
      from: "Sender Name <test@test.com>",
      to: "receiver@test.com",
      subject: "Subject",
      html: output,
    })

    console.log("Message sent: %s", info.messageId)
  }
  main().catch(console.error)
})

app.listen(3000, () => console.log(`Listening on 3000...`))

...和gatsby-config.js

module.exports = {
  siteMetadata: {
    title: "title",
    author: "author_name",
  },
  plugins: [
    "gatsby-plugin-react-helmet",
    {
      resolve: "gatsby-source-contentful",
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
    "gatsby-plugin-sass",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "src",
        path: `${__dirname}/src/`,
      },
    },
    "gatsby-transformer-remark",
  ],
  proxy: {
    prefix: "/api",
    url: "http://localhost:3000",
  },
}

我还试图像这样在gatsby配置文件中添加快速中间件：

var proxy = require("http-proxy-middleware")

module.exports = {
  developMiddleware: app => {
    app.use(
      "/api/",
      proxy({
        target: "http://localhost:3000",
        pathRewrite: {
          "/api/": "",
        },
      })
    )
  },
}

但是当我这样做时，此表格不起作用，消息未发送。我想我做错了:)也许我不需要重写“ / api /”，但别的...