Why am I getting a Nodemailer Cannot /POST error? - reactjs

Question

I wrote a code for a contact us form on nodemailer and I am getting a cannot /post error. What could be the problem? I set up a mailtrap account but listed my email as my regular email. I am not used to using react or node.js so I am having a hard time understanding this. Here is my code:
for contact_us.js:
import React from "react";
import "./contactus.css"
import axios from 'axios';
export default class ContactUs extends React.Component {
state = {
name: '',
subject: '',
email: '',
message: ''
}
constructor(props) {
super(props);
this.onEmailChange= this.onEmailChange.bind(this);
this.onMsgChange= this.onMsgChange.bind(this);
this.onNameChange= this.onNameChange.bind(this);
this.onSubjectChange= this.onSubjectChange.bind(this);
this.submitEmail= this.submitEmail.bind(this);
}
render() {
return (
<div className="section">
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="section-title">
<h2 className="title">Contact Us</h2>
<p>Let us know what you think! </p><hr/>
<form id="contact-form"
method="POST">
<div className="form-group">
<div className="row">
<div className="col-md-6">
<input placeholder = "Name" id="name" type="text"
className="form-control" required value={this.state.name}
//onChange={this.onNameChange.bind(this)}/>
onChange= {this.onNameChange}/>
</div>
<div className="col-md-6">
<input placeholder = "Email" id="email" type="email"
className="form-control" aria-describedby="emailHelp"
required value={this.state.email}
//onChange=
//{this.onEmailChange.bind(this)}
onChange= {this.onEmailChange}
/>
</div>
</div>
</div>
<div className="form-group">
<input placeholder = "Subject" id="subject" type="text"
className="form-control" required value={this.state.subject}
//onChange={this.onSubjectChange.bind(this)}
onChange= {this.onSubjectChange}/>
</div>
<div className="form-group">
<textarea placeholder = "Message" id="message"
className="form-control" rows="1"
required value={this.state.message}
//onChange= {this.onMsgChange.bind(this)}
onChange={this.onMsgChange}/>
</div>
<button className= "button" type="submit" id="button" onSubmit={this.submitEmail} >Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
);
}
onNameChange(event) {
this.setState({name: event.target.value})
}
onEmailChange(event) {
this.setState({email: event.target.value})
}
onSubjectChange(event) {
this.setState({subject: event.target.value})
}
onMsgChange(event) {
this.setState({message: event.target.value})
}
submitEmail(e){
console.log('submitting');
e.preventDefault();
axios({
method: "POST",
url:"localhost:3000/contact_us",
data: this.state
}).then((response)=>{
if (response.data.status === 'success'){
alert("Message Sent.");
this.resetForm()
}else if(response.data.status === 'fail'){
alert("Message failed to send.")
}
})
}
resetForm(){
this.setState({name: '', email: '',subject:'', message: ''})
}
}
for index.js:
var express = require('express');
var router = express.Router();
var nodemailer = require('nodemailer');
require('dotenv').config();
var cors = require('cors');
const creds = require('./config');
var app= express();
const port= 4000;
app.use((request, response, next) => {
response.header("Access-Control-Allow-Origin", "*");
response.header("Access-Control-Allow-Headers", "Content-Type");
next();
});
const transporter = nodemailer.createTransport({
host: 'smtp.mailtrap.io',
port: 2525,
auth: {
user: '',
pass: ''
}
});
transporter.verify(function(error, success) {
if (error) {
console.log(error);
} else {
console.log("Server is ready to take our messages");
}
});
app.post('/contact_us', (req, res, next) => {
var name = req.body.name
var email = req.body.email
var subject = req.body.subject
var message = req.body.message
var mail = {
from: name,
to: '',//my regular email I used to sign up to mailtrap
subject: subject,
text: message
}
transporter.sendMail(mail, (err, data) => {
if (err) {
console.log('failed');
res.json({
status: 'fail'
})
} else {
console.log('successful');
res.json({
status: 'success'
})
}
})
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})

Answer 1

First spot:
Add HTTP to the URL "http://localhost:3000/contact_us" and change the port to 4000 since the API is working under such port. Check if this is enough to get it working