NextJS+Netlify表单|表单提交导致HTTP错误405

Question

我使用本教程在首页构建了一个简单的表单。

这是我的ContactForm组件的代码块：

import React, { useState } from "react";
import { useRouter } from "next/router";
import styles from '../styles/Contact.module.scss'
const ContactForm = ({ contact }) => {
const [submitterName, setSubmitterName] = useState("");
const router = useRouter();
const confirmationScreenVisible =
router.query?.success && router.query.success === "true";
const formVisible = !confirmationScreenVisible;
const ConfirmationMessage = (
<React.Fragment>
<p>
Thank you for submitting this form. Someone should get back to you
within 24-48 hours.
</p>
<button
onClick={() => router.replace("/", undefined, { shallow: true })}
>
Submit Another Response
</button>
</React.Fragment>
);
const theContactForm = (
<form
name="contact-form"
method="POST"
action="/?success=true"
data-netlify="true"
netlify-honeypot="bot-field"
>
<input type="hidden" name="subject" value={`Prospekti ${submitterName} otti yhteyttä Juhokoli.fi`} />
<input type="hidden" name="contact-form" value="contact-form" />
<input type="hidden" name="bot-field" />
<div className={styles.formControl}>
<label htmlFor="fullName">Nimi *</label>
<input
placeholder="Nimi *"
type="text"
name="fullName"
id="fullName"
autoComplete="name"
onChange={(e) => setSubmitterName(e.target.value)}
required
/>
</div>
<div className={styles.formControl}>
<label htmlFor="tel">Puhelinnumero *</label>
<input
placeholder="Puhelinnumero *"
type="tel"
autoComplete="tel"
name="tel"
id="tel"
required
/>
</div>
<div className={styles.formControl}>
<label htmlFor="email">Sähköposti</label>
<input
placeholder="Sähköposti"
type="email"
autoComplete="email"
name="email"
id="email"
/>
</div>
<div className={styles.formControl}>
<label htmlFor="message">Viesti</label>
<textarea
placeholder="Viesti"
name="message"
id="message"
/>
</div>
<div className={styles.formControl}>
<button
type="submit"
className="btn">
{contact.CTA}
</button>
</div>
</form>
)

return (
<section id={styles.formSection}>
<div id="yhteydenotto" className={styles.formContainer}>
{formVisible ? theContactForm : ConfirmationMessage}
</div>
</section>
)
}
export default ContactForm

然后这个ContactForm在我的索引页面上呈现为这样：

const Index = ({ meta, hero, themes, references, faq, contact }) => {
useEffect(() => {
if (window.netlifyIdentity) {
window.netlifyIdentity.on('init', (user) => {
if (!user) {
window.netlifyIdentity.on('login', () => {
document.location.href = '/admin/'
})
}
})
}
}, [])
return (
<>
<Meta
meta={meta}
/>
<Script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></Script>
<main id="home">
<Hero
hero={hero}
/>
<ThemeBlock themes={themes} />
<ReferenceList references={references} />
<Faq faq={faq} />
<div className="container ContactContainer">
<ContactDetails contact={contact} />
<ContactForm contact={contact} />
</div>
</main>
</>
)
}
export default Index

你可以在这里实时测试我的网站：https://koli22.netlify.app/

然而，在现场网站上，它只是简单地说"找不到页面"，而在本地开发中，它首先告诉405错误，然后将我重定向到成功页面。：-/

我知道有一些主题与此类似，例如：

https://answers.netlify.com/t/netlify-form-submissions-now-failing-with-405-method-not-allowed/50396

我试着用他的代码块复制这个

import React, { useState } from "react";
import { useRouter } from "next/router";
import styles from '../styles/Contact.module.scss'
const ContactForm = ({ contact }) => {
const [submitterName, setSubmitterName] = useState("");
const router = useRouter();
const confirmationScreenVisible =
router.query?.success && router.query.success === "true";
const formVisible = !confirmationScreenVisible;
// Handle the submit event on form submit.
const handleSubmit = async (event) => {
event.preventDefault()
const data = {
fullName: event.target.fullName.value,
tel: event.target.tel.value,
email: event.target.email.value,
message: event.target.message.value,
}
const JSONdata = JSON.stringify(data)
console.log(JSONdata)
const response = await fetch('/form.html', {
method: 'POST',
body: JSONdata,
headers: {
'Content-Type': 'application/json',
},
})
const result = await response.json()
console.log(result)
}
const ConfirmationMessage = (
<>
<p>
Thank you for submitting this form. Someone should get back to you
within 24-48 hours.
</p>
<button
onClick={() => router.replace("/", undefined, { shallow: true })}
>
Submit Another Response
</button>
</>
);
const theContactForm = (
<form
name="contact-form"
action={handleSubmit}
method="POST"
data-netlify="true"
netlify-honeypot="bot-field"
>
<input type="hidden" name="subject" value={`Prospekti ${submitterName} otti yhteyttä Juhokoli.fi`} />
<input type="hidden" name="contact-form" value="contact-form" />
<input type="hidden" name="bot-field" />
<div className={styles.formControl}>
<label htmlFor="fullName">Nimi *</label>
<input
placeholder="Nimi *"
type="text"
name="fullName"
id="fullName"
autoComplete="name"
onChange={(e) => setSubmitterName(e.target.value)}
required
/>
</div>
<div className={styles.formControl}>
<label htmlFor="tel">Puhelinnumero *</label>
<input
placeholder="Puhelinnumero *"
type="tel"
autoComplete="tel"
name="tel"
id="tel"
required
/>
</div>
<div className={styles.formControl}>
<label htmlFor="email">Sähköposti</label>
<input
placeholder="Sähköposti"
type="email"
autoComplete="email"
name="email"
id="email"
/>
</div>
<div className={styles.formControl}>
<label htmlFor="message">Viesti</label>
<textarea
placeholder="Viesti"
name="message"
id="message"
/>
</div>
<div className={styles.formControl}>
<button
type="submit"
className="btn">
{contact.CTA}
</button>
</div>
</form>
)

return (
<section id={styles.formSection}>
<div id="yhteydenotto" className={styles.formContainer}>
{formVisible ? theContactForm : ConfirmationMessage}
</div>
</section>
)
}
export default ContactForm

这是我在公用文件夹中的html表单：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yhteydenottolomake</title>
</head>
<body>
<form
name="contact-form"
data-netlify="true"
netlify-honeypot="bot-field"
>
<input type="hidden" name="contact-form" value="contact-form" />
<input type="hidden" name="bot-field" />
<label htmlFor="fullName">Nimi *</label>
<input
placeholder="Nimi *"
type="text"
name="fullName"
id="fullName"
autoComplete="name"
required
/>
<label htmlFor="tel">Puhelinnumero *</label>
<input
placeholder="Puhelinnumero *"
type="tel"
autoComplete="tel"
name="tel"
id="tel"
required
/>
<label htmlFor="email">Sähköposti</label>
<input
placeholder="Sähköposti"
type="email"
autoComplete="email"
name="email"
id="email"
/>
<label htmlFor="message">Viesti</label>
<textarea
placeholder="Viesti"
name="message"
id="message"
/>
</form>
</body>
</html>

但我仍然得到了405错误的方法是不允许的。

有人能告诉我下一步该做什么，或者如何用我目前的尝试来修复我的解决方案吗？

Answer 1

我在这个问题上花了很多时间。因为您使用的是onSubmit，而这是使用POST，所以您需要从表单元素属性中删除method=POST。