Блог

Я пытаюсь выполнить простой POST-запрос с помощью выборки. Я пытаюсь создать контактную форму, используя ванильный Javascript, HTML, CSS на интерфейсе и Node.js / Экспресс на серверной части. Вот мой интерфейсный код:

             <form id="sendMail">
                <div>
                  <label for="name">Name: </label>
                  <input name="name" id="name" placeholder="Name">
                </div>
                <div>
                  <label for="email">Email: </label>
                  <input name="email" id="email" placeholder="Email">
                </div>
                <div>
                    <label for="phone">Phone: </label>
                    <input name="phone" id="phone" placeholder="Phone">
                  </div>
                <div>
                    <label for="subject">Message: </label>
                    <input name="subject" id="subject" placeholder="How can we help you?">
                </div>
                <div>
                  <input type="submit">Send Message</input>
                </div>
            </form> 

<script>
  document.getElementById("sendMail").addEventListener('submit', sendMail);

  function sendMail(e) {
    e.preventDefault();

    let name = document.getElementById("name").value;
    let email = document.getElementById("email").value;
    let phone = document.getElementById("phone").value;
    let subject = document.getElementById("subject").value;

    console.log("sendMail fired!", name, email, phone, subject);

    fetch('/api/contact', {
        method: 'POST', 
        headers: {
          'Accept': 'application/json, text/plain, */*',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({name: name, email: email, phone: phone, subject: subject}),
      })
    //   .then(response => response.json())
      .then(data => {
        console.log('Success:', data);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  } 
</script>   
 

Вот мой код на серверной части:

 const http = require('http');
const express = require('express');
const path = require('path');
const cors = require('cors');

const app = express();

app.use(cors());
app.use(express.json());
app.use(express.static("express"));

// default URL for website
app.use('/', function(req,res){
    res.sendFile(path.join(__dirname '/express/index.html'));
    //__dirname : It will resolve to your project folder.
  });

const server = http.createServer(app);
const port = 4040;

const nodemailer = require('nodemailer');

app.post('/api/contact', async(req, res, next) => {
  const { name, email, phone, subject } = req.body;
  console.log("sendMail fired: ", req.body, name, email, phone, subject);

  const transporter = nodemailer.createTransport({
      service: 'gmail',
      auth: {
          user: 'myEmailAddress',
          pass: 'myPassword',
      }
  });

  let mailOptions = await transporter.sendMail({
      from: `info@companyemailaddress`,
      to: `${email}`,
      subject: `company`,
      text:
          `${name}, nn`  
          `Thank you for contacting company! A representative will contact you within 2 business days. nn`  
          `If you have any further question, feel free to email us at:  nn`  
          `info@company nn`  
          `- company Automated Message`
  });

  console.log('Message sent: %s', mailOptions.messageId);
  // console.log('Preview URL: %s', nodemailer.getTestMessageUrl(mailOptions))

  let mailOptions2 = await transporter.sendMail({
    from: `info@companyemail address`,
    to: `myEmail`,
    subject: `company`,
    text:
        `Name: ${name}, nn`  
        `Email: ${email}, nn`  
        `Phone: ${phone}, nn`  
        `Subject: ${subject}, nn`
  });

  console.log('Message sent: %s', mailOptions2.messageId);

  res.send('Email sent!')   
})


server.listen(port);

console.debug('Server listening on port '   port);

 

Когда я нажимаю на ввод «отправить» во внешнем интерфейсе, я получаю успешный ответ без каких-либо сообщений об ошибках сервера, но когда я смотрю на свой сервер console.logs, он ничего не показывает — как будто сервер не был затронут. Если я просто отправляю объект в теле запроса post, который не является JSON.stringify() , сервер выдает сообщения об ошибках, в которых говорится, что проблема с объектом в теле. Итак, похоже, что запрос POST успешно связывается с сервером. Но ничего не происходит.

Что я делаю не так?

Вы должны изменить свой корневой маршрут с app.use на app.get

при использовании app.use на / нем любые маршруты сопоставляются с любым http-глаголом и действуют как глобальное промежуточное ПРОГРАММНОЕ обеспечение.

Поэтому ваш post-запрос фактически соответствовал этому app.use , и app.post у вас никогда не было возможности выполнить.

Вы можете протестировать свой API с помощью postman, а затем сгенерировать запрос на выборку для вас. в вашем случае вы должны указать полный uri в качестве аргументов для вашего вызова fetcch.

 fetch('http://example.com/movies.json')
 

.затем(ответ => response.json())
.затем(console.log);