Попытка настроить контактную форму и получение ошибки 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;

Вот мой сервер. 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();
});

})

Я подозреваю, что проблема в форме. Компонент jsx в этой строке:

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

Большое вам спасибо!

Answer 1

Ваш сервер работает через порт 4444, поэтому вам нужно добавить следующую строку в ваш пакет. json файл на стороне клиента.

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

далее вам нужен ваш сервер. js боковой файл указывают на контактную форму.

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

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

Answer 2

Вы не сделали /contact API на сервере. js
Поскольку вы установили порт 4444 на узле- Express Сервер.
Ваш URL-адрес `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);
  });