Recaptcha 联系表 7 "status: spam" 在 Vue.js App

Question

我构建了一个在子域（与 WordPress 相同的主域）下运行的小型 Vue.js 应用程序，并使用 axios 包向联系表 7 rest API 提交表单。不幸的是，我总是只得到 "status: spam" 作为回应。我已经为 Vue.js 应用程序设置了一个 recaptcha，并且在主页上的 WordPress recaptcha 中，我也将新的子域列入了白名单。

如果我关闭 Recaptcha，它会按预期工作。

const formData = new FormData();
      formData.append('customerName', this.formInput.customerName);
      formData.append('customerEmail', this.formInput.customerEmail);
      formData.append('customerPhonenumber', this.formInput.customerPhonenumber);
      formData.append('date', this.formInput.date);
      formData.append('privacy', this.formInput.privacy);

axios.post('https://MY_DOMAIN/wp-json/contact-form-7/v1/contact-forms/1347/feedback', formData)
        .then((response) => {
          console.log(response);
          this.result.status = response.data.status;
          this.result.message = response.data.message;

          if (response.data.status === 'mail_sent') {
            this.formInput.customerName = '';
            this.formInput.customerEmail = '';
            this.formInput.customerPhonenumber = '';
            this.formInput.date = '';
            this.formInput.privacy = 0;
          }
        });

Answer 1

对于那些正在寻找这个特定问题的答案的人（我知道现在给出答案已经太晚了）。

如 OP 所述，它被标记为垃圾邮件的原因是，

1. 我们没有发送 WP Nonce 作为提交的一部分，正如我在 OP 代码片段中看到的那样，没有包含 WP Nonce。最好的做法是将 WP Nonce 作为提交给任何 Wordpress-end（Rest-API 等）的一部分，以避免任何问题。请参阅下面的代码，其中 Contact Form 7 也在检查 WP Nonce。

    private function spam() {
        $spam = false;

        if ( $this->contact_form->is_true( 'subscribers_only' )
        && current_user_can( 'wpcf7_submit', $this->contact_form->id() ) ) {
            return $spam;
        }

        $user_agent = (string) $this->get_meta( 'user_agent' );

        if ( strlen( $user_agent ) verify_nonce() ) {
            $spam = true;
        }

        if ( $this->is_blacklisted() ) {
            $spam = true;
        }

        return apply_filters( 'wpcf7_spam', $spam );
    }

    private function verify_nonce() {
        if ( ! $this->contact_form->nonce_is_active() ) {
            return true;
        }

        return wpcf7_verify_nonce( $_POST['_wpnonce'] );
    }

2. 就像上一部分提到的 OP 一样，我怀疑 OP 定位的 Contact Form 字段包含 Recaptcha 字段，在这种情况下，我们必须在该特定表单中包含 Recaptcha 响应 - 因为 Contact Form 7 做了一个检查是否有 Recaptcha 字段 and/or 该字段不是空的。下面是检查 Recaptcha 的代码片段。

    add_filter( 'wpcf7_spam', 'wpcf7_recaptcha_check_with_google', 9 )
    function wpcf7_recaptcha_check_with_google( $spam ) {
        if ( $spam ) {
            return $spam;
        }

        $contact_form = wpcf7_get_current_contact_form();

        if ( ! $contact_form ) {
            return $spam;
        }

        $tags = $contact_form->scan_form_tags( array( 'type' => 'recaptcha' ) );

        if ( empty( $tags ) ) {
            return $spam;
        }

        $recaptcha = WPCF7_RECAPTCHA::get_instance();

        if ( ! $recaptcha->is_active() ) {
            return $spam;
        }

        $response_token = wpcf7_recaptcha_response();
        $spam = ! $recaptcha->verify( $response_token );

        return $spam;
    }

为了解决这个问题，

1. 对于 WP Nonce，我们可以在发送提交时简单地包含它
2. 对于 Recaptcha，我们必须以某种方式生成 Recaptcha 结果，就我而言，幸运的是，我也有 Recaptcha 字段，所以我可以简单地获取该结果并在提交时传递它。
3. 为了将来参考，您可以查看 - 本质上和我之前提到的一样

---

祝未来遇到此问题的人好运！ :)