为什么我的联系表格在 localhost 上工作，但在上传到网络主机时不工作？答案

【问题标题】：Why my contact form is working on localhost but not working when uploaded to web host?为什么我的联系表格在 localhost 上工作，但在上传到网络主机时不工作？
【发布时间】：2022-01-25 13:30:06
【问题描述】：

我的联系表单在 localhost 上工作得非常好，但是当我将代码上传到网络时（我使用 Bluehost 作为我的主机），我的代码无法正常工作。这是我在 server.js 中的代码的一部分：

const { text } = require('express');
const express = require('express');
const app = express();

require('dotenv').config(); //{path: 'custom/path/.env'}
const nodemailer = require("nodemailer");
const PORT = process.env.PORT || 9000;

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

app.get('/', (req, res)=>{
    res.sendFile(__dirname + '/public_html/ContactUs.html')
    res.sendFile(__dirname + '/public_html/index.html')
})

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

    const transporter = nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: 'abc@yahoo.com',
            pass: '1234'
        }
    })
    
    const mailOptions = {
        from: req.body.email,
        to: 'abc@yahoo.com',
        subject: `Message from: ${req.body.firstname} ${req.body.lastname}`,
        text: `Name: ${req.body.firstname} ${req.body.lastname}\nEmail: ${req.body.email}\nPhone: ${req.body.phone}\n\nMessage: ${req.body.message}`
    }

    transporter.sendMail(mailOptions, (error, info) =>{
        if(error){
            console.log("error")
            res.send('error')
        } else {
            if (req.body.email === "" || req.body.firstname === "" || req.body.message === "") {
                console.log("Email, name, and message field is required!")
                res.send('Email, name, and message field is required!')
            } else if (validateEmail(req.body.email) == false){
                console.log("Enter a valid email")
                res.send('Enter a valid email')
            } else {
                console.log('Email sent:' + info.response)
                res.send('success')
            }
        }
    })
})

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

function validateEmail(email) {
    var re = /\S+@\S+\.\S+/;
    return re.test(email);
}

这是我的 ContactUs.html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/contact.css">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
    <!-- contact form -->
    <div class="contact-section">
        <div class="contact-wrapper">
            <div class="contact-title">Send us a Message</div>
            <form class="contact-form">
                <div class="dbl-inputs">
                  <div class="field">
                    <input type="text" id="firstname" name="firstname" placeholder="Enter your first name">
                    <i class='fas fa-user'></i>
                  </div>
                  <div class="field">
                    <input type="text" id="lastname" name="lastname" placeholder="Enter your last name">
                    <i class='fas fa-user'></i>
                  </div>
                </div>

                <div class="dbl-inputs">
                  <div class="field">
                    <input type="text" id="phone" name="phone" placeholder="Enter your phone">
                    <i class='fas fa-phone-alt'></i>
                  </div>
                  <div class="field">
                    <input type="text" id="email" name="email" placeholder="Enter your email">
                    <i class='fas fa-envelope'></i>
                  </div>
                </div>

                <div class="message">
                  <textarea placeholder="Write your message" name="message" id="message"></textarea>
                  <i class="fas fa-comment-alt"></i>
                </div>

                <div class="button-area">
                  <button type="submit">Send Message</button>
                  <span>Sending your message...</span>
                </div>

            </form>
        </div>
    </div>
    <script src="js/app1.js"></script>
</body>
</html>

我不知道出了什么问题。如果您需要更多代码来解决问题，请告诉我。提前致谢！

【问题讨论】：

你检查端口了吗？和你预期的一样吗？
对于 localhost 我使用 9000 端口并且在线我正在写这个： const PORT = process.env.PORT || 9000;如果我将它上传到网络主机上，我用谷歌搜索应该设置哪个端口号，结果出现了。我不确定这是否正确。@AlanYu

标签： node.js express nodemailer contact-form

【解决方案1】：

如果它在您的本地服务器上运行，那一定是由于实时服务器的差异。检查您的ContactUs.html 文件。如果此页面调用您的localhost 服务器，它将无法在实时服务器上运行。确保您的ContactUs.html 的实时版本正在调用/提交到实时服务器地址，而不是仍在调用localhost。

编辑：感谢您添加联系页面代码。在这一行你定义你的表单标签：

<form class="contact-form">

如果没有设置动作属性（例如<form class="contact-form" action="http://myserver.com/mypage">），它会将表单提交到当前页面。如果您的本地服务器和联系页面都在 //localhost/ 上运行，那么这将起作用。在实时页面上，确保您的服务器和联系人页面在相同的地址和端口上运行。

如果这不起作用，请发布您尝试提交表单时发生的错误。

【讨论】：

我的 ContactUs.html 不会调用我的本地主机或实时服务器。 @轩
您的联系表单是如何提交到服务器的？您可能希望将联系表单/代码添加到问题中。
刚刚进行了编辑。@Xuan
我添加到我的答案中
我相信服务器和联系页面在同一个端口上运行。关于错误，控制台上没有显示错误。在实时服务器上，我的代码正在执行 if 语句（显示在 server.js 中）： if(error){ console.log("error") res.send('error') 而不是 else 语句。在本地主机上，执行了我的 else 语句。 @轩