Tratando de establecer Formulario de contacto y recibir error 404

ReneBunny:

Soy bastante nuevo en esto por lo que la respuesta puede ser obvia, pero estoy bastante confundido por el momento. Estoy creando un formulario de contacto para mi aplicación Reaccionar, y sigo recibir el siguiente mensaje de error al hacer clic en "enviar":

La POST http: // localhost: 3000 / contacto 404 (No Encontrado)

Aquí está mi componente 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;

Aquí está mi 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();
});

})

Sospecho que el problema está en el componente form.jsx en esta línea:

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

Muchas gracias!

Akhil Nayak:

No ha hecho /contactAPI en server.js
Puesto que usted ha configurado el puerto a 4444 en el Nodo-Express Server.
Su URL es ` http: // localhost: 4444 / api / v1 '

Su solicitud posterior debe ser algo como esto:

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);
  });