时间戳

首页 > 解决方案 > 当我使用 firebase 部署我的网站时，我的联系表不起作用，但当我使用本地主机时它会起作用。我的第一个网站，所以不知道该怎么做

javascript - 当我使用 firebase 部署我的网站时，我的联系表不起作用，但当我使用本地主机时它会起作用。我的第一个网站，所以不知道该怎么做

问题描述

我跟着一个视频教程，告诉我如何使用 nodemailer 做到这一点。当我使用“npm run dev”在本地主机上运行它时，它工作得非常好，但是在我使用 firebase 部署我的网站后，在 app.js 中告诉我出现问题的警报出现了，这意味着电子邮件尚未发送并且我也检查了它没有

app.js 中的代码

const contactForm = document.querySelector('.contact-form');

let name = document.getElementById('name');
let email = document.getElementById('email');
let message = document.getElementById('message');

contactForm.addEventListener('submit', (e)=>{
    e.preventDefault();

    let formData = {
        name: name.value,
        email: email.value,
        message: message.value
    }

    let xhr = new XMLHttpRequest();
    xhr.open('POST', '/');
    xhr.setRequestHeader('content-type', 'application/json');
    xhr.onload = function(){
        console.log(xhr.responseText);
        if(xhr.responseText == 'success') {
            alert('Email sent');
            name.value = '';
            email.value = '';
            message.value = '';
        }else{
            alert('something went wrong');
        }
    }

    xhr.send(JSON.stringify(formData));
})

server.js 中的代码

const express = require('express');
const app = express();

const nodemailer = require("nodemailer");

const PORT = process.env.PORT || 2500;

//Middleware
app.use(express.static('webFiles'));
app.use(express.json())

app.get('/', (req, res)=>{
    res.sendFile(__dirname + '/webFiles/Contact.html');
})

app.post('/', (req,res)=>{
    console.log(req.body);

    const transporter = nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: 'myEmail', -- had to hide these
            pass: 'myEmailsPassword'
        }
    });

    const mailOptions = {
        from: req.body.email,
        to: 'myEmail', -- sorry have to hide this again
        subject: `Message from ${req.body.email}`,
        text: req.body.message
    };

    transporter.sendMail(mailOptions, (error, info)=>{
        if(error) {
            console.log(error);
            res.send('error');
        }else{
            console.log('Email sent: ' + info.response);
            res.send('success');
        }
    });
})

app.listen(PORT, ()=>{
    console.log(`Server running on port ${PORT}`);
})

html中的代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="referrer" content="origin">
  <link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.min.css">
  <link rel="stylesheet" href="css/style.css">
  <title>Contact Me</title>
</head>

<body>
      
      <div class="loader_bg">
        <div class="loader"></div>
      </div>

      <section class="wrapper">
        <div id="stars"></div>
        <div id="stars2"></div>
        <div id="stars3"></div>
      </section>
      
      <div class="container">
          <nav>
              <h1 class="title"><a href="index.html">Ajaypartap ;<span> D</span></a></h1>
              <ul>
                  <li><a href="index.html">About Me</a></li>
                  <li><a href="Project.html">Projects</a></li>
                  <li><a href="Skills.html">Skills</a></li>
                  <li><a href="#">Contact Me</a></li>
              </ul>
          </nav>
      </div>
      
      <form id="contact-form" class="contact-form">

        <div class="title">
          <h2>CONTACT</h2>
        </div>

        <div class="half">

          <div class="item">
            <label for="name">NAME</label>
            <input type="text" id="name" required="required">
          </div>

          <div class="item">
            <label for="email">EMAIL</label>
            <input type="email" id="email" required="required">
          </div>

        </div>

        <div class="full">
          <label for="message">MESSAGE</label>
          <textarea id="message" required="required"></textarea>
        </div>

        <div class="action">
          <input type="submit" class="submit"  value="Send">
          <input type="reset" value="Reset">
        </div>

        <div class="icons">
          <a href="https://www.instagram.com/aj__2002/" id="insta" class="fab fa-instagram" target="_blank"></a>
          <a href="https://github.com/AjaypartapDhaliwal" id="git" class="fab fa-github" target="_blank"></a>
        </div>

      </form>

      <script src="js/app.js"></script>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script>
          setTimeout(function(){
              $('.loader_bg').fadeOut();
          }, 2000);
      </script>

</body>

</html>

代码目录

标签： javascripthtmlfirebasenodemailercontact-form

解决方案

推荐阅读