Vue 使用 PHPMailer 提交表单数据答案

【问题标题】：Vue submit form data with PHPMailerVue 使用 PHPMailer 提交表单数据
【发布时间】：2021-05-23 11:18:19
【问题描述】：

我正在尝试从页面提交联系表单，但提交表单后，没有任何反应。为此，我正在使用 Vue、Axios 和 PHPMailer。 在网络选项卡中，我可以看到实际上找不到 post.php 文件。但它存在并且位于项目的根目录中。因此，路径“../post.php”应该是对的。 我更改了此问题的电子邮件和服务器数据，但所有电子邮件都存在并且正确包含。任何帮助都深表感谢。谢谢。

contact.vue

    export default {
        name: 'Contact',
        data() {
            return {
                text: '',
                form: {
                    email: '',
                    name: '',
                    telefon: '',
                    checked: [],
                },

                show: true,
            };
        },
        methods: {
            onSubmit() {
                const config = {
                    responseType: 'text',
                };
                
                axios
                    .post(
                        '../post.php',
                        {
                            name: this.form.name,
                            email: this.form.email,
                            telefon: this.form.telefon,
                            message: this.text,
                            checked: this.form.checked,
                        },
                        config,
                    )
                    .then(response => {
                        console.log('success', response.data.message);
                    })
                    .catch(error => {
                        console.log(error.response);
                    });
            },
            
        },
    };

post.php

    <?php
    
    // Import PHPMailer classes into the global namespace
    // These must be at the top of your script, not inside a function
    use PHPMailer\PHPMailer\PHPMailer;
    use PHPMailer\PHPMailer\Exception;
    
    // Load Composer's autoloader
    require 'vendor/autoload.php';
    
    // Instantiation and passing `true` enables exceptions
    $mail = new PHPMailer(true);
    
    try {
       //Server settings
       $mail->SMTPDebug = 0; // 0 - Disable Debugging, 2 - Responses received from the server
       $mail->isSMTP(); // Set mailer to use SMTP
       $mail->Host = 'smtp.page.com'; // Specify main and backup SMTP servers
       $mail->SMTPAuth = true; // Enable SMTP authentication
       $mail->Username = 'page@page.com'; // SMTP username
       $mail->Password = 'mypassword'; // SMTP password
       $mail->SMTPSecure = 'tls';//PHPMailer::ENCRYPTION_STARTTLS; Enable TLS encryption, `PHPMailer::ENCRYPTION_SMTPS` also accepted
       $mail->Port = 587; // TCP port to connect to
    
       //Recipients
       $mail->setFrom('from@email.com', 'Contact Form');
       $mail->addAddress('recipient@recipient.com', 'Recipient'); // Add a recipient
    
       // Content
        $inputJSON = file_get_contents('php://input');
        $input = json_decode($inputJSON, TRUE);
        $name = $input['name'];
        $email = $input['email'];
        $tel = $input['tel'];
    
        $result['message']  = 'test';
    
       $mail->isHTML(true); // Set email format to HTML
       $mail->Subject = 'subject';
       $mail->Body    = $result;
       // Attachement 
       $mail->send();
       echo 'Message has been sent';
    } catch (Exception $e) {
       echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
    }

【问题讨论】：

你试过检查 PHP 日志吗？
我怀疑../post.php 路径。这个路径是相对于当前工作目录的，而不是文件的位置，所以你可能会发现它没有找到正确的位置。不过，这在您的 Web 服务器日志中应该很明显，您应该在其中看到带有路径的请求，然后它无法在路径中找到文件 - 这会告诉您它实际在哪里查找。
没错@Synchro。我更改为“/post.php”并找到该文件。现在我在控制台中取得了成功，但我没有收到任何电子邮件：/

标签： javascript php vue.js phpmailer

【解决方案1】：

所以，显然问题在于相对路径。删除“。”解决了找不到 post.php 文件的问题。我还发现由于 CORS 问题，我的电子邮件没有送达。我仍然不知道如何解决这个问题。我向我的 FTP 服务器添加了一个 .htaccess 文件，但它没有帮助。 不管怎样，这里发布的问题已经解决了。

【讨论】：