Localhost works fine, but issue come Zoha mailer on live server

Localhost works fine, but issue come Zoha mailer on live server

  1. package.json

  3.       "proxy": {
  4.         "/auth/google": {
  5.           "target": "http://localhost:8000/"
  6.         }
  7.       },
ContactForm.jsx

  1. import React, { useState, useEffect } from 'react'

  3. const ContactForm = () => {

  5.     const [fname, setFname] = useState("");
  6.     const [lname, setLname] = useState("");
  7.     const [email, setEmail] = useState("");
  8.     const [subject, setSubject] = useState("");
  9.     const [msg, setMsg] = useState("");
  10.     const [message, setMessage] = useState('');

  12.     useEffect(() => {
  13.         setTimeout(function () {
  14.             setMessage(true)
  15.         }, 9000);
  16.     },
  17.         [message])


  20.     const sendEmail = async (e) => {
  21.         e.preventDefault();


  24.         setFname("");
  25.         setLname("");
  26.         setEmail("");
  27.         setSubject("");
  28.         setMsg("");

  30.         setMessage(`Thank you ${fname} ${lname} for enquiry. We will back to you asap.`);

  32.         const res = await fetch("/register", {
  33.             method: "POST",
  34.             headers: {
  35.                 "Content-Type": "application/json"
  36.             }, body: JSON.stringify({
  37.                 fname, lname, email, subject, msg
  38.             })
  39.         });

  41.         console.log(res);


  44.     }


  47.     return (
  48.         <>
  49.             <div className="contact-form">
  50.                 <div className="contact-form-info">
  51.                     <div className="contact-title">
  52.                         <h3>TELL US YOUR PROJECT</h3>
  53.                     </div>
  54.                     <form id="contact-form">
  55.                         <div className="contact-page-form">
  56.                             <div className="contact-input">
  57.                                 <div className="contact-inner">
  58.                                     <input type="text" placeholder="First Name *" id="first-name" value={fname} onChange={(e) => setFname(e.target.value)} />
  59.                                 </div>
  60.                                 <div className="contact-inner">
  61.                                     <input type="text" placeholder="Last Name *" id="last-name" value={lname} onChange={(e) => setLname(e.target.value)} />
  62.                                 </div>
  63.                                 <div className="contact-inner">
  64.                                     <input type="text" placeholder="Email *" id="email" value={email} onChange={(e) => setEmail(e.target.value)} />
  65.                                 </div>
  66.                                 <div className="contact-inner">
  67.                                     <input type="text" placeholder="Subject *" id="subject" value={subject} onChange={(e) => setSubject(e.target.value)} />
  68.                                 </div>
  69.                                 <div className="contact-inner contact-message">
  70.                                     <textarea placeholder="Message *" value={msg} onChange={(e) => setMsg(e.target.value)}></textarea>
  71.                                 </div>
  72.                             </div>
  73.                             <div className="contact-submit-btn">
  74.                                 <button className="submit-btn" type="submit" onClick={sendEmail} >Send Email</button>
  75.                                 <p className="form-messege pt-3">{message}</p>
  76.                             </div>
  77.                         </div>
  78.                     </form>
  79.                 </div>
  80.             </div>
  81.         </>
  82.     )
  83. }

  85. export default ContactForm;
app.js

  1. const express = require("express");
  2. const app = express();
  3. const router = require("./routes/router");
  4. const cors = require("cors");

  6. const port = 8000
  7. app.use(express.json());
  8. app.use(cors());
  9. app.use(router);

  11. app.listen(port,()=>{
  12.     console.log(`Server start on port no : ${port}`)
  13. })
router.js existing quillreading.com
  1. const express = require("express");
  2. const router = new express.Router();
  3. const nodemailer = require("nodemailer");

  5. router.post("/register", (req, res) => {

  7.     const { fname, lname, email, subject, msg } = req.body;


  10.     try {
  11.         let transporter = nodemailer.createTransport({
  12.             host: "smtppro.zoho.in",
  13.             port: 465,
  14.             secure: true,   // true for 465, false for other ports
  15.             auth: {
  16.                 user: "info@mydomain.com",
  17.                 pass: "myAppPassword",
  18.             },
  19.         });

  21.         const mailOptions = {
  22.             from: "info@mydomain.com",
  23.             cc: "info@mydomain.com",
  24.             to: email,
  25.             subject: "Website Form",
  26.             html: 'First Name : ' + fname + '<br>' +
  27.                 'Last Name : ' + lname + '<br>' +
  28.                 'Email : ' + email + '<br>' +
  29.                 'Subject : ' + subject + '<br>' +
  30.                 'Message : ' + msg
  31.         }

  33.         transporter.sendMail(mailOptions, (error, info) => {
  34.             if (error) {
  35.                 console.log("Error", error)
  36.             } else {
  37.                 console.log("Email sent" + info.response);
  38.                 res.status(201).json({ status: 201, info })
  39.             }
  40.         })
  41.     } catch (error) {
  42.         res.status(401).json({ status: 401, error })
  43.     }
  44. });

module.exports = router;T
The Zoha emailer used to work properly on localhost when sending emails from my react and node js apps. The deployment did not work on my hosting. Giving this.


Response {type: 'basic', url: 'https://example.com/register', redirected: false, status: 200, ok: true, …}