尝试设置联系表并收到错误 404

Question

我对此很陌生，所以答案可能很明显，但我现在很困惑。我正在为我的 React 应用程序创建一个联系表单，并且在单击“提交”时不断收到以下错误消息：

POST http://localhost:3000/contact 404（未找到）

这是我的 Form.jsx 组件：

import React, { Component } from 'react';
import styles from './Form.module.css'
import axios from 'axios';

class Form extends Component {

    state = {
        name: '',
        message: '',
        email: '',
        sent: false,
        buttonText: 'Send Message'
    }

    formSubmit = (e) => {
      e.preventDefault()

      this.setState({
          buttonText: '...Sending'
      })

      let data = {
          name: this.state.name,
          email: this.state.email,
          message: this.state.message
      }

      axios.post('/contact', data)
      .then( res => {
          this.setState({ sent: true }, this.resetForm())
      })
      .catch( () => {
        console.log('Message not sent')
      })
    }
    resetForm = () => {
      this.setState({
          name: '',
          message: '',
          email: '',
          buttonText: 'Message Sent'
      })
  }

    render() {
        return(
          <form
          id={styles.contact_form}
          className="contact_form"
          onSubmit={ (e) => this.formSubmit(e)}
          method="POST"
        >
          <div className={styles.input_group}>
            <div className={styles.form_group}>
              <input
              id="name"
                type="text"
                placeholder="Name"
                className={styles.name_control}
                autoComplete="off"
                value={this.state.name}
                onChange={e => this.setState({ name: e.target.value})} name="name"  type="text"  />

            </div>
          </div>
          <div className={styles.form_group}>
            <input
            id="email"
              type="email"
              placeholder="Email"
              className={styles.message_control}
              aria-describedby="emailHelp"
              autoComplete="off"
              value={this.state.email}
                 onChange={(e) => this.setState({ email: e.target.value})} name="email" type="email" required value={this.state.email} />


          </div>

          <div className={styles.form_group}>
            <textarea
              id="message"
              className={styles.message_input}
              type="text"
              placeholder="Message"
              rows="5"
                onChange={e => this.setState({ message: e.target.value})} name="message" value={this.state.message} required/>

          </div>
          <div className={styles.buttons}>
            <button type="submit" className={styles.blob_btn}>{this.state.buttonText}

              <span className={styles.blob_btn__inner}>
                <span className={styles.blob_btn__blobs}>
                  <span className={styles.blob_btn__blob}></span>
                  <span className={styles.blob_btn__blob}></span>
                  <span className={styles.blob_btn__blob}></span>
                  <span className={styles.blob_btn__blob}></span>
                </span>
              </span>
            </button>
          </div>

          <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <defs>
              <filter id="goo">
                <feGaussianBlur
                  in="SourceGraphic"
                  result="blur"
                  stdDeviation="10"
                ></feGaussianBlur>
                <feColorMatrix
                  in="blur"
                  mode="matrix"
                  values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7"
                  result="goo"
                ></feColorMatrix>
                <feBlend in2="goo" in="SourceGraphic" result="mix"></feBlend>
              </filter>
            </defs>
          </svg>
        </form>
        );
    }
}

export default Form;

这是我的 server.js：

const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const cors = require('cors');

const app = express();

const port = 4444;


if (process.env.NODE_ENV !== 'production') {
    require('dotenv').config();
}
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(cors());

app.listen(port, () => {
  console.log('We are live on port 4444');
});


app.get('/', (req, res) => {
  res.send('Welcome to my api');
})

app.post('/api/v1', (req,res) => {
  var data = req.body;

let smtpTransport = nodemailer.createTransport({
  service: 'Gmail',
  port: 465,
  auth: {
    user: `${process.env.GMAIL_USER}`,
    pass: `${process.env.GMAIL_PASS}`
  }
});

let mailOptions = {
  from: data.email,
  to: `${process.env.GMAIL_USER}`,
  subject: 'Portfolio Inquiry',
  html: `<p>${data.name}</p>
          <p>${data.email}</p>
          <p>${data.message}</p>`
};

smtpTransport.sendMail(mailOptions,
(error, response) => {
  if(error) {
    res.send(error)
  }else {
    res.send('Success')
  }
  smtpTransport.close();
});

})

我怀疑问题出在这一行的 form.jsx 组件中：

     axios.post('/contact', data)
      .then( res => {
          this.setState({ sent: true }, this.resetForm())
      })

非常感谢！

Answer 1

你还没有在 server.js 中创建/contact API
由于您已在 Node-Express 服务器中将端口设置为 4444。
你的网址是`http://localhost:4444/api/v1'

您的发布请求应如下所示：

let data = {
          name: this.state.name,
          email: this.state.email,
          message: this.state.message
      }

axios.post('http://localhost:4444/api/v1', data)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Answer 2

您的服务器在端口 4444 上运行，因此您需要将以下行添加到客户端的 package.json 文件中。

"proxy": "http://localhost:4444"

接下来，您需要将 server.js 端文件指向联系表单。

var Contact = require('./path/to/Contact');

app.use('/contact', Contact);