I am trying to create an contact page using ReactJs NodeJs express and nodemail. I am not getting any error. But it's not working. The post request is not working so i guess there's something wrong with the axios function but it could be anywhere else too so.Is the error in the backend part or the frontend part How do i fix it?
Post Log saying
Proxy error: Could not proxy request /api/forma from localhost:3000 to localhost:3001 (ECONNRESET)
Client side
import React,{useState} from 'react'
import axios from 'axios';
const Form = () => {
const [name,setName] = useState("");
const [email,setEmail] = useState("");
const [message,setMessage] = useState("");
const [sent,setSent] = useState(false);
const formSubmit=(e)=> {
e.preventDefault();
let data = {
name:name,
email:email,
message:message
}
axios.post('/api/forma',data)
.then(res => {
setSent(true);
},resetForm())
.catch(() => {
console.log("message not sent");
})
}
const resetForm = () => {
setName("");
setEmail("");
setMessage("");
setTimeout(()=> {
setSent(false);
},3000)
}
return (
<div className="container">
<form onSubmit={formSubmit}>
<div className="single">
<label>Name</label>
<input type="text" name="name" className="name" placeholder="Enter your name"
value={name}
onChange={e => setName(e.target.value)}
/>
</div>
<div className="single">
<label>Email</label>
<input type="text" name="email" className="email" placeholder="Enter your email"
value={email}
onChange={e => setEmail(e.target.value)}/>
</div>
<div className="textarea">
<label>Message</label>
<textarea name="message" id="" cols ="30" rows="5" placeholder="Enter your message here"
value={message}
onChange={e => setMessage(e.target.value)}></textarea>
</div>
<div className={sent?'msg msgAppear':'msg'}>
Message has been sent
</div>
<div>
<button type="submit">submit</button>
</div>
</form>
</div>
)
}
export default Form
Server side
const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer')
const cors = require('cors')
const app = express();
app.use(bodyParser.json);
app.use(bodyParser.urlencoded({extended:true}));
app.use(cors());
app.get('/',()=>{
resizeBy.send("Welcome")
});
app.post('/api/forma',(req,res) => {
let data = req.body
let smtptransport = nodemailer.createTransport({
service:'Gmail',
port:465,
auth:{
user:'[email protected]',
pass: "secreate"
}
});
let mailOptions = {
from:data.email,
to:'[email protected]',
subject:`Message from ${data.name}`,
html:`
<h3>Informations<h3>
<ul>
<li>Name: ${data.name}</li>
<li>Name: ${data.email}</li>
</ul>
<h3>Message<h3>
<p>${data.message}</p>
`
}
smtptransport.sendMail(mailOptions,(error,response) => {
if(error){
res.send(error)
}
else{
res.send('Success')
}
})
smtptransport.close();
})
const PORT = process.env.PORT || 3001;
app.listen(PORT,() => {
console.log(`Server starting at port ${PORT}`);
})