We Keep Coding

Issue with form submission - Node.js

I am experiencing an issue with submitting a form on my website. When I fill out the form and click the submit button, nothing happens and I do not see any network requests in the browser console.
The form is supposed to submit to the URL https://example.com/, but it seems that the form is not able to send a POST request to this URL.
I have checked the JavaScript console and there are no error messages, and I have also verified that the form fields have the correct names and that the submit button has the correct type.
I am using a shared hosting plan with PHP 7.3.33, and my website was built with WordPress. Recently, I decided to change the design of my website and I did it with Node.js v18.14.0.
I followed the advice of technical support, and I deployed the app to the server. using the application manager.
Now, the technical support answered me this: "What I can confirm is that it's making a successful POST request to "/" (e.g the same page), however there are no errors". But there is no post at the console, and the message I get always is: "Error al enviar el formulario" (error sending form).
This is my js and form:
const form = document.querySelector('#form');
const spinner = document.querySelector('#spinner');
const formMessage = document.querySelector('#form-message');
form.addEventListener('submit', (event) => {
event.preventDefault();
spinner.style.display = 'block';
formMessage.style.display = 'none';
const formData = new FormData(form);
fetch('/', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
spinner.style.display = 'none';
formMessage.style.display = 'block';
formMessage.textContent = data.message;
form.reset();
})
.catch(error => {
spinner.style.display = 'none';
formMessage.style.display = 'block';
formMessage.textContent = 'Error al enviar el formulario.';
});
});
<form method="post" action="/" id="form">
<div class="row gtr-uniform">
<div class="col-6 col-12-xsmall"><input type="text" name="name" id="name" placeholder="Nombre" /></div>
<div class="col-6 col-12-xsmall"><input type="email" name="email" id="email" placeholder="Email" /></div>
<div class="col-12">
<select id="type" name="type">
<option value="" selected>Selecciona Tipo</option>
</select>
</div>
<div class="col-12">
<select id="make" name="make" disabled>
<option value="" selected>Selecciona Marca</option>
</select>
</div>
<div class="col-12">
<select id="model" name="model" disabled>
<option value="" selected>Selecciona Modelo</option>
</select>
</div>
<div class="col-12">
<select id="year" name="year" disabled>
<option value="" selected>Selecciona Año</option>
</select>
</div>
<div class="col-12"><textarea name="message" id="message" placeholder="Tu mensaje" rows="4"></textarea></div>
<div class="col-12">
<ul class="actions special">
<li><input type="submit" value="Enviar" class="primary" /></li>
</ul>
<div id="spinner" style="display: none;">
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg></div>
<span id="form-message" style="display: none;">Consulta enviada con éxito</span>
</div>
</div>
</form>
And this is my backend in Node.js:
const path = require('path');
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');
const sanitizer = require('sanitizer');
const rateLimit = require("express-rate-limit");
const app = express();
app.use('/assets', express.static(path.join(__dirname, 'assets'), {
setHeaders: function (res) {
res.set('Content-Type', 'text/css');
}
}));
app.use('/images', express.static(path.join(__dirname, 'images'), {
setHeaders: function (res, path) {
if (path.endsWith('.jpg')) {
res.set('Content-Type', 'image/jpeg');
} else if (path.endsWith('.png')) {
res.set('Content-Type', 'image/png');
}
}
}));
app.use('/assets/css/images', express.static(path.join(__dirname, 'assets/css/images')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// create a rate limiter middleware
const submissionLimiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 100, // limit each IP to 100 requests per windowMs
message: "Too many submissions from this IP, please try again later"
});
// apply the rate limiter middleware to the / endpoint
app.use('/', submissionLimiter);
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.post('/', (req, res) => {
const name = sanitizer.sanitize(req.body.name);
const email = sanitizer.sanitize(req.body.email);
const type = sanitizer.sanitize(req.body.type) || 'No especifica';
const make = sanitizer.sanitize(req.body.make) || 'No especifica';
const model = sanitizer.sanitize(req.body.model) || 'No especifica';
const year = sanitizer.sanitize(req.body.year) || 'No especifica';
const message = sanitizer.sanitize(req.body.message);
const transporter = nodemailer.createTransport({
host: 'hydra.vivawebhost.com',
port: 995,
auth: {
user: 'info#calverasparts.com',
pass: 'Diplodocus1986!'
}
});
const mailOptions = {
from: 'calverasparts#gmail.com',
to: 'info#calverasparts.com',
subject: 'Nueva Consulta',
text: `Recibiste una nueva consulta. Nombre: ${name}. Email: ${email}. Tipo: ${type}. Marca: ${make}. Modelo: ${model}. Año: ${year}. Mensaje: ${message}.`
};
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
console.log(error);
res.status(500).json({ status: 'error', message: 'Error al enviar el correo' });
} else {
console.log('Email sent: ' + info.response);
res.status(200).json({ status: 'success', message: 'Consulta enviada con éxito' });
}
});
});
const port = process.env.PORT || 3000;
console.log(`Server running on port ${port}`); // Add this line
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
I really don't know where is the problem.
Thank you for your help.
Best regards.

change the URL in the JavaScript code to match the correct URL that the form should be submitted to.
In your JavaScript code, change this line:
fetch('/', {})
To:
fetch('https://example.com/', {})

Axios Post Body Empty with Express

I'm trying to send over two pieces of text data from my React frontend to an Express backend but whenever I do the post command with Axios the body appears as {} in the backend and I cannot use it. My code is listed below.
Client (App.js):
import { useState, useEffect } from 'react';
import React from 'react'
import './App.css';
import Axios from 'axios'
function App() {
const [cocktailName, setCocktailName] = useState("");
const [cocktailMain, setCocktailMain] = useState("");
const submitRecipe = () => {
const recipeData = {"cocktailName": cocktailName, "cocktailMain": cocktailMain};
Axios.post('http://localhost:3001/api/insert', recipeData).then(() => {alert('successful insert');});
}
return (
<div className="App">
<h1>CRUD Application Test</h1>
<div className='InputForm'>
<label> Cocktail Name: </label>
<input type="text" name="Cocktail Name" onChange={(e)=>
{setCocktailName(e.target.value);}}/>
<br></br>
<label> Cocktail Main Ingredient: </label>
<input type="text" name="Cocktail Main Ingredient" onChange={(e)=> {
setCocktailMain(e.target.value)}}/>
<br></br>
<button onClick={submitRecipe}>Submit</button>
</div>
</div>
);
}
export default App;
Server (App.js):
const app = express()
const mysql = require('mysql')
const bodyParser = require('body-parser')
const cors = require('cors')
const db = mysql.createPool({
host: 'localhost',
user: 'root',
password: 'password',
database: 'cruddatabase'
});
app.use(cors());
app.use(bodyParser.urlencoded({extended: true}));
app.post('/api/insert', (req, res)=> {
console.log(req.body)
const cocktailName = req.body.cocktailName;
const cocktailMain = req.body.cocktailMain;
console.log(cocktailName)
console.log(cocktailMain)
//This is where i'll eventually insert it into a database
const sqlInsert = "INSERT INTO cocktail_recipes (cocktailName, cocktailMain) VALUES (?,?)"
// db.query(sqlInsert, [cocktailName, cocktailMain], (err, result) => {
// console.log(err)
// });
});
app.listen(3001, () => {
console.log("running on port 3001")
});
Any help at all is greatly appreciated.

Change this line:
app.use(bodyParser.urlencoded({extended: true}));
With this one:
app.use(express.json());
Axios send a JSON when you give an object as data without specifying the Content-Type like you did. So urlencoded is not the right set here.

you need to have a res.send() somewhere within this block
app.post('/api/insert', (req, res)=> {
console.log(req.body)
const cocktailName = req.body.cocktailName;
const cocktailMain = req.body.cocktailMain;
console.log(cocktailName)
console.log(cocktailMain)
//This is where i'll eventually insert it into a database
const sqlInsert = "INSERT INTO cocktail_recipes (cocktailName, cocktailMain) VALUES (?,?)"
// db.query(sqlInsert, [cocktailName, cocktailMain], (err, result) => {
// console.log(err)
// });
});

Firstly to get a response from your backend, you need to specify what to receive by yourself, you can send the response as json by doing: res.json("..."). You should change the ... to any response you want to get back. And if you want to get your data back, you can put it there. You can also do res.send("...") to send a message after the request was completed
Secondly, you need to let your backend accept json data by adding this after the app variable.
app.use(express.json());
Lastly, I would encourage you to you async function to make your code looks cleaner. You can change your post request code to something like this and let me know if it works.
app.post("/api/insert", async (req, res) => {
try {
const { cocktailName, cocktailMain } = req.body;
const sqlInsert = await "INSERT INTO cocktail_recipes (cocktailName, cocktailMain) VALUES (?,?)";
} catch (e) {
console.log(e.message);
}
});

Throwing 404 Error with message "Cannot POST /api/users/register"

The main problem is here --> cant go through proxy - don't know why
gave all the routes and checked them correctly
but overall still not working
Even though I can use cors and try directly but not sure why cant I use this method to perform the action ?
I am trying to register the user and send the data to MongoDB but it is not allowing it ?
can you please give a suggestion?
thanks
POST http://localhost:3000/api/users/register 404 (Not Found)
Error: Request failed with status code 404
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.onloadend (xhr.js:66)
```
frontend part- I am using for react
```import React, { useState, useEffect } from "react";
import axios from "axios";
import Error from "../components/Error";
import Loader from "../components/Loader";
import Success from '../components/Success'
export default function Registerscreen() {
const [name, setname] = useState("");
const [email, setemail] = useState("");
const [password, setpassword] = useState("");
const [cpassword, setcpassword] = useState("");
const[loading, setloading]=useState(false)
const[error, seterror]=useState(false)
const[success, setsuccess]=useState(false)
async function register(){
if(password!=cpassword)
{
alert("passwords not matched")
}
else{
const user={
name,
email,
password
}
try {
setloading(true)
const result = await axios.post('/api/users/register',user)
setloading(false)
setsuccess(true)
setemail('')
setname('')
setcpassword('')
setpassword('')
} catch (error) {
seterror(true)
setloading(false)
console.log(error);
}
}
}
return (
<div className='register'>
<div className="row justify-content-center mt-5">
<div className="col-md-5 mt-5 text-left shadow-lg p-3 mb-5 bg-white rounded">
{loading && (<Loader/>)}
{success && (<Success success='User Registered Successfully' />)}
{error && (<Error error='Email already registred' />)}
<h2 className="text-center m-2" style={{ fontSize: "35px" }}>
Register
</h2>
<div>
<input required type="text" placeholder="name" className="form-control mt-1" value={name} onChange={(e)=>{setname(e.target.value)}} />
<input required type="text" placeholder="email" className="form-control mt-1" value={email} onChange={(e)=>{setemail(e.target.value)}} />
<input
type="text"
placeholder="password"
className="form-control mt-1"
value={password}
required
onChange={(e)=>{setpassword(e.target.value)}}
/>
<input
type="text"
placeholder="confirm password"
className="form-control mt-1"
value={cpassword}
required
onChange={(e)=>{setcpassword(e.target.value)}}
/>
<button onClick={register} className="btn btn-primary rounded-pill mt-3 mb-3">REGISTER</button>
<br/>
<a style={{color:'black'}} href="/login">Click Here To Login</a>
</div>
</div>
</div>
</div>
);
}
```
pacakage.json- where I gave a proxy and trying to make it work
```,
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000/"
}
```
usersroute- defined all the routes
```const express = require("express");
const router = express.Router();
// express router
const User = require("../models/user")
//import the user model
router.post("/register", async(req, res) => {
const newUser = new User({name: req.body.name , email: req.body.email , password: req.body.password})
try {
const user = await newUser.save()
// save the user
res.send('User Registered successfully')
} catch (error) {
return res.status(400).json({ message: error });
}
});
router.post("/login", async(req, res) => {
const {email , password} = req.body
try {
const user = await User.findOne({email : email , password: password})
// match the subset in a collection
if(user){
res.send(currentUser);
}
else{
return res.status(400).json({ message: 'User Login Failed' });
}
} catch (error) {
return res.status(400).json({ message: 'Something went weong' });
}
});
module.exports = router
```
server.js---- server file where I gave all the routes
```
const express = require("express");
const app = express();
bodyParser = require('body-parser');
// support parsing of application/json type post data
app.use(bodyParser.json());
//support parsing of application/x-www-form-urlencoded post data
app.use(bodyParser.urlencoded({ extended: true }));
const dbConfig = require('./db')
app.use(express.json())
// import the rooms route
const roomsRoute = require('./routes/roomsRoute')
const usersRoute = require('./routes/usersRoute')
// access for the rooms route- to go and check the endpoints in rooms route- to fecth the rooms in database
app.use('/api/rooms', roomsRoute)
app.use('api/users', usersRoute)
const port = process.env.PORT || 5000;
app.listen(port,() => console.log(`yayay Server running on port ${port}`));
```
Userschema
```
const mongoose = require("mongoose");
const userSchema = mongoose.Schema({
name : {
type: String ,
required: true
},
email : {
type: String ,
required: true
},
password : {
type: String ,
required: true
},
isAdmin : {
type: Boolean ,
default: false
}
} , {
timestamps : true,
collection: 'users',
})
const userModel = mongoose.model('users', userSchema)
module.exports = userModel
```

I dont think it is a configuration error or it is because of the proxy.
There is an error in your server.js file, where you mentioned the route request.
Please change the route to
app.use('/api/users', usersRoute)
instead of this
app.use('/api/rooms', roomsRoute)
app.use('api/users', usersRoute)
then the link the your trying to get will be passed as a post request to the back-end.
404- is syntax error. I would start by checking the syntax rather than the config file.

You've configured the API server to use port 5000 by default, and the frontend app is calling port 3000.
Make sure you're calling the API via the correct port number.
You can also try to change the API to a full URL if it's a proxy
issue, like this
"proxy": {
"/api/users": {
"target": "http://localhost:5000"
}
},
Or if you're using webpack, make sure you configure the proxy correctly.
https://webpack.js.org/configuration/dev-server/#devserver-proxy

Contact form using nodemailer is not working

I have created a contact form and trying to use nodemailer to send the message to my email, but not sure where is the issue.
I created a server.js and put it in the main folder while Mailer.js that contain the form in components
I am not sure how the server know that I want to use the form
this is my first project on React and I think I still don't understand some basics of React
const express = require('express');
const bodyParser = require('body-parser');
const exphbs = require('express-handlebars');
const path = require('path');
const nodemailer = require('nodemailer');
const app = express();
// View engine setup
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');
// Static folder
app.use('/public', express.static(path.join(__dirname, 'public')));
// Body Parser Middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.get('/', (req, res) => {
res.render('contact');
});
app.post('/send', (req, res) => {
const output = `
<p>You have a new contact request</p>
<h3>Contact Details</h3>
<ul>
<li>Name: ${req.body.name}</li>
<li>Email: ${req.body.email}</li>
</ul>
<h3>Message</h3>
<p>${req.body.message}</p>
`;
// create reusable transporter object using the default SMTP transport
let transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: process.env.EMAIL, // generated ethereal user
pass: process.env.PASSWORD // generated ethereal password
},
tls:{
rejectUnauthorized:false
}
});
// setup email data with unicode symbols
let mailOptions = {
from: process.env.EMAIL, // sender address
to: email, // list of receivers
subject: 'Node Contact Request', // Subject line
text: 'Hello world?', // plain text body
html: output // html body
};
// send mail with defined transport object
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
return console.log(error);
}
console.log('Message sent: %s', info.messageId);
console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info));
res.render('contact', {msg:'Email has been sent'});
});
});
app.listen(3000, () => console.log('Server started...'));
This is the form
import React from 'react';
import "./Mailer.scss";
const Mailer = () =>{
return (
<div className="container">
<div className="section ContactPage">
<div className="ContactPage-banner">
<h1 className="ContactPage-banner__title">Contact Us</h1>
</div>
<div className="ContactPage-content">
<form method="POST" className="form" action="send">
<div className="row">
<label className="labels">Name</label>
<input type="text" name="name" className="input"/>
</div>
<div className="row">
<label className="labels">Email</label>
<input type="email" name="email" className="input"/>
</div>
<div className="row">
<label className="labels">Message</label>
<textarea name="message" rows='4' className="input"/>
<input type="submit" value="Send"/>
</div>
</form>
</div>
</div>
</div>
);
};
export default Mailer;
this is what I get when I click on SEND

From what I could gather, you're posting to the wrong URL.
In your server app, you create a post handler for /send
However, in your React App, you post to /xxxxx/send (You obscured the xxxxx part)
I advise that you replace your
<form method="POST" className="form" action="send">
With
<form method="POST" className="form" action="http://127.0.0.1:3000/send">
And try again

Cant find the problem an express server problem

i have an express server which has the code:
// Setup empty JS object to act as endpoint for all routes
projectData = {};
// Require Express to run server and routes
const express = require('express');
// Start up an instance of app
const app = express();
/* Dependencies */
const bodyParser = require('body-parser');
/* Middleware*/
//Here we are configuring express to use body-parser as middle-ware.
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// Cors for cross origin allowance
const cors = require('cors');
app.use(cors());
// Initialize the main project folder
app.use(express.static('website'));
const port = 8000;
// Setup Server
const server = app.listen(port, listening);
function listening(){
// console.log(server);
console.log(`running on localhost: ${port}`);
};
app.get('/all', sendData);
function sendData (req, res) {
res.send(projectData);
};
app.post('/all', receiveData);
function receiveData (req, res) {
projectData.temp = req.body.temp;
projectData.date = req.body.date;
projectData.ures = req.body.ures;
res.send(projectData);
console.log(projectData);
}
so simply i am making a weather journal app which receives data from an API and shows it to the user and this is the index look like:
so basically the user is going to write the zip code and feelings and when clicking on the button generate the entry should contain the information like this
but when the user click the button generate this shows and the user have to click it again in order to show the information like the top picture:
and this is the JavaScript code for the client-side:
/* Global Variables */
let baseURLz = 'http://api.openweathermap.org/data/2.5/weather?zip=';
let baseURLa = '&appid=';
const apiKey = '8e017daef09d7f784c8595696bdcb587';
// Create a new date instance dynamically with JS
let d = new Date();
let newDate = d.getMonth()+'.'+ d.getDate()+'.'+ d.getFullYear();
document.getElementById('generate').addEventListener('click', performAction);
function performAction(e){
const zipcode = document.getElementById('zip').value;
const ures = document.getElementById('feelings').value;
getWeather(baseURLz, zipcode, baseURLa, apiKey)
.then(function(data){
console.log(data);
postData('/all', {temp: data.main.temp, date: newDate, ures: ures});
})
.then(
updateUI()
)
}
const getWeather = async (baseURLz, zipcode, baseURLa, apikey)=>{
const res = await fetch(baseURLz+zipcode+baseURLa+apikey+'&units = imperial')
try {
const data = await res.json();
console.log(data)
return data;
} catch(error) {
console.log("error", error);
// appropriately handle the error
}
}
const postData = async ( url = '', data = {})=>{
const res = await fetch(url, {
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data), // body data type must match "Content-Type" header
});
try {
const newData = await res.json();
return newData;
}catch(error) {
console.log("error", error);
}
};
const updateUI = async () => {
const req = await fetch('/all');
try{
const allData = await req.json();
document.getElementById('date').innerHTML = 'Date: '+allData.date;
document.getElementById('temp').innerHTML = 'Temperature: '+allData.temp+'°F';
document.getElementById('content').innerHTML = 'Feelings: '+allData.ures;
}catch(error){
console.log("error", error);
}
}
and this is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Weather Journal</title>
<link href="https://fonts.googleapis.com/css?family=Oswald:400,600,700|Ranga:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id = "app">
<div class ="holder headline">
Weather Journal App
</div>
<div class ="holder zip">
<label for="zip">Enter Zipcode here</label>
<input type="text" id="zip" placeholder="enter zip code here">
</div>
<div class ="holder feel">
<label for="feelings">How are you feeling today?</label>
<textarea class= "myInput" id="feelings" placeholder="Enter your feelings here" rows="9" cols="50"></textarea>
<button id="generate" type = "submit"> Generate </button>
</div>
<div class ="holder entry">
<div class = "title">Most Recent Entry</div>
<div id = "entryHolder">
<div id = "date"></div>
<div id = "temp"></div>
<div id = "content"></div>
</div>
</div>
</div>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
please i want to figure out where is the problem causing this to happen.