使用 Axios 调用通过 REST API 从 WordPress 发送电子邮件答案

【问题标题】：Sending an email from WordPress through REST API with an Axios call使用 Axios 调用通过 REST API 从 WordPress 发送电子邮件
【发布时间】：2019-11-01 18:04:19
【问题描述】：

我正在使用 this snippet 通过 REST API 从 WordPress 发送电子邮件。

我的基于 Vue 的前端正在使用 Axios put() 调用将表单数据发布到 WordPress：

sendEmail () {
  const formData = new FormData()
  formData.append('contact_name', this.contactName)
  formData.append('contact_email', this.contactEmail)
  formData.append('contact_message', this.contactMessage)
  this.$axios.$put(`${this.baseUrl}/wp-json/contact/v1/send`, formData)
    .then((res) => {
      this.success = true
    })
    .catch((err) => {
      this.$toast.error(err.response)
    })
}

我认为上面的代码是正确的，问题出在 WordPress 方面：

函数.php：

function sendContactMail(WP_REST_Request $request) {
  $response = array(
    'status' => 304,
    'message' => 'There was an error sending the form.'
  );
  $parameters = $request->get_json_params();
  if (count($_POST) > 0) {
    $parameters = $_POST;
  }
  $siteName = wp_strip_all_tags(trim(get_option('blogname')));
  $contactName = wp_strip_all_tags(trim($parameters['contact_name']));
  $contactEmail = wp_strip_all_tags(trim($parameters['contact_email']));
  $contactMessage = wp_strip_all_tags(trim($parameters['contact_message']));    
  if (!empty($contactName) && !empty($contactEmail) && !empty($contactMessage)) {
    $subject = "(New message sent from site $siteName) $contactName <$contactEmail>";
    $body = "<h3>$subject</h3><br/>";
    $body .= "<p><b>Name:</b> $contactName</p>";
    $body .= "<p><b>Email:</b> $contactEmail</p>";
    $body .= "<p><b>Message:</b> $contactMessage</p>";
    if (send_email($contactEmail, $contactName, $body)) {
      $response['status'] = 200;
      $response['message'] = 'Form sent successfully.';
    }
  }
  return json_decode(json_encode($response));
  exit();
}

add_action('rest_api_init', function () {
  register_rest_route( 'contact/v1', '/send', array(
    'methods' => 'POST',
    'callback' => 'sendContactMail'
  ));
});

但是，我不知道如何解决该问题，因为这里发生的任何问题都不会产生任何我可以看到的输入（不幸的是，我无权访问服务器 PHP 日志）。

知道我的代码有什么问题或如何解决它吗？

下面也是send_email()函数的代码：

function send_email($form_email, $form_name, $form_message) {
  $email_subject = 'Message from '. get_bloginfo('name') . ' - ' . $form_email;
  $headers = "From: '" . $form_name . "' <" . $form_email . "> \r\n";
  $headers .= "Reply-To: ". strip_tags($form_email) . "\r\n";
  $headers .= "Content-Type:text/html;charset=utf-8";
  $email_message = '<html><body>';
  $email_message .= "<table>";
  $email_message .= "<tr><td>NAME: </td><td>" . $form_name . "</td></tr>";
  $email_message .= "<tr><td>MESSAGE: </td><td>" . $form_message . "</td></tr>";
  $email_message .= "</table>";
  $email_message .= "</body></html>";
  $email_message = nl2br($email_message);
  wp_mail('me@gmail.com', $email_subject, $email_message, $headers);
}

【问题讨论】：

你能用这些函数建立你自己的php站点并进行调试吗？
嘿，你成功了吗？
你成功了吗？我认为这可能是由 axios 发送 PUT 请求而不是 POST（您在 PHP 中声明的）引起的
me@gmail.com 是真实的电子邮件吗？另请注意，Gmail 习惯于将来自您的邮件放入垃圾邮件中。

标签： wordpress vue.js axios wordpress-rest-api

【解决方案1】：

问题出在您的 axios put 请求中。由于缺少标头，您的表单未正确提交到服务器：

this.$axios.$put(`${this.baseUrl}/wp-json/contact/v1/send`, formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then((res) => {
  this.success = true
})
.catch((err) => {
  this.$toast.error(err.response)
})

我通过您的 wordpress 函数请求响应中的更多参数对其进行了调试。我看到所有表单参数都丢失了，所以我对此进行了调查，中提琴：它现在可以工作了。

【讨论】：