Can't send a post request through Axios and Nodemailer with React and Node.js - in dev mode

Question

I set up my react and nodejs app with nodemailer and axios, configured a request sending data from frontend to backend but met a trouble.

First there was proxy error: Could not proxy request /services/moving/appointment/form from localhost:3000 to http://127.0.0.1:8000. (ECONNRESET), although I have written in frontend package.json "proxy":"http://127.0.0.1:8000". I also tried using CORS in backend package.json with dozens of configurations however neither worked.

The file structure is next:

So the backend is in the root, frontend is in frontend dir.

Now about the request. I have a ƒorm page which sends data from the user and sends to backend - a route '/form' with post method takes the req.body and places in nodemailer to send an email.

When I post through postman app directly to http://127.0.0.1/form, everything works and I receive the email.

However, when I send a post request through frontend with axios, the email is not received in Mailtrap.

Here is the code which handles sending emails through the page:

import React from 'react'
import axios from 'axios'
import { Redirect } from 'react-router-dom' 

class Form extends React.Component {
    state = {
        values: {
            phoneNumber: '',
            email: '',
            firstName: '',
            lastName: '',
            address: '',
            notes: '',
        },
        isSubmitted: false,
    }
onInputChange = (event) => {
        let values = { ...this.state.values }
       
        for (let key in values) {

            if (event.target.name === key) {
                values[key] = event.target.value
            }
        }

        this.setState(() => {
            return {
                values,
            }
        })
    }


    render() {
        let values = []
        for (let key in this.state.values) {
            values.push(key)
        }

        const formCreating = values.map((field, index) => {
            return (
                <div key={index}>
                    <label>{field}</label>
                    <input
                        type="text"
                        name={field}
                        onChange={this.onInputChange}
                    />
                </div>
            )
        })

        return (
            <div>
                {this.props.allowed ? (
                    <div>
                        <form>
                            {formCreating}

                            <button
                                onClick={() =>
                                    axios
                                        .post(
                                            'form',
                                            this.state
                                                .values
                                        )
                                        .then(() =>
                                            console.log(
                                                'hey'
                                            )
                                        )
                                }
                            >
                                Submit
                            </button>
                        </form>
                    </div>
                ) : (
                    <Redirect to={'/services'} />
                )}
            </div>
        )
    }
}

Just to save your time: onInputChange puts the user's input to the state, and then the button click will call axios.post(('form'), this.state.events) - I supposed that would send the email but it doesn't.

Here are my npm scripts from backend package.json:

"scripts": {
        "start": "node server.js",
        "client": "npm run start --prefix frontend",
        "server": "nodemon server.js",
        "dev": "concurrently \"npm run client\" \"npm run server\""
}

Any ideas?

Answer 1

There is error while using axios.post. You need to mention the full URL while sending the request i.e,

axios.post(
          'http://127.0.0.1:8000/form',
          this.state
              .values
      )
      .then(() =>
          console.log(
              'hey'
          )
      )

Also make sure that your are passing the data object correctly. I suggest creating the data object of values first and passing the variable in POST request