Next.js 获取验证失败将表单数据发送到联系表单 7 API

Question

我正在尝试将数据发送到 Contact Form 7 API，但在发送表格时出现错误：

{into: "#", status: "validation_failed", message: "One or more fields have an error. Please check and try again.", posted_data_hash: "", invalid_fields:

表单上的输入字段具有所有正确的名称值，例如name="your-name"

我正在像这样发送表单数据：

  async function handleSubmit(e) {
    e.preventDefault();

    const formData = {};

    Array.from(e.currentTarget.elements).forEach((field) => {
      if (!field.name) return;
      formData[field.name] = field.value;
    });

    await fetch(
      "https://domain.tld/cms/wp-json/contact-form-7/v1/contact-forms/1234/feedback",
      {
        body: JSON.stringify(formData),
        headers: {
          "content-type": "multipart/form-data",
        },
        method: "POST",
      }
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  }

我已经在 Postman 中尝试过了，它可以正常工作并获取状态消息发送。我不知道我在这里做错了什么。

表格如下：

<Form onSubmit={handleSubmit}>
    <Form.Group controlId="your-name">
      <Form.Control
        required
        type="text"
        placeholder="Your name"
        name="your-name"
      />
      <Form.Control.Feedback type="invalid">
        Please enter your name
      </Form.Control.Feedback>
    </Form.Group>
    <Form.Group controlId="your-email">
      <Form.Control
        required
        type="email"
        placeholder="Your email address"
        name="your-email"
      />
      <Form.Control.Feedback type="invalid">
        Please enter your email
      </Form.Control.Feedback>
    </Form.Group>
    <Form.Group controlId="your-message">
      <Form.Control
        as="textarea"
        cols={30}
        rows={6}
        placeholder="Write your message..."
        name="your-message"
      />
    </Form.Group>
    <Button
      type="submit"
      variant="primary"
      size="lg"
    >
      Send Message
      <span></span>
    </Button>
  </Form>

Answer 1

如果您使用任何以 multipart/* 开头的 Content-Type，您必须设置边界，而您的代码中没有边界。

为了克服这个问题，只需像 const formData = new FormData() 那样使用 FormData class 并附加像 formData.append(key, value) 这样的值，这样你就会有一个 FormData 实例，这样 Axios 就可以找出什么一种你发送的数据，它可以自动设置 Content-Type 和边界。

这是应该可以工作的代码，但我还没有测试过它：

async function handleSubmit(e) {
  e.preventDefault();

  const formData = new FormData();

  Array.from(e.currentTarget.elements).forEach((field) => {
    if (!field.name) return;
    formData.append(field.name, field.value);
  });

  await fetch(
    "https://domain.tld/cms/wp-json/contact-form-7/v1/contact-forms/1234/feedback",
    {
      body: formData,
      method: "POST",
    }
  )
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      console.error("Error:", error);
    });
}

Next.js 获取验证失败将表单数据发送到联系表单 7 API

Next.js getting validation failed sending form data to contact form 7 API

javascript

api

post

contact-form-7

next.js