使用netflix表单提交表单时出现404错误

Question

我按照netlify文档在我的网站上创建了一个简单的联系人表单。但是当我提交表单时，控制台显示404错误。

下面是我的代码:

import React from "react"
import {Row, Col, Form, Button, Alert} from "react-bootstrap"
import axios from "axios"
import * as qs from "query-string"
export default class Contact extends React.Component {
constructor(props) {
super(props)
this.domRef = React.createRef()
this.state = { feedbackMsg: null, variant: 'info' }
}

handleSubmit(event) {
this.setState({
feedbackMsg: "Envoi en cours..",
variant: 'info'
})
event.preventDefault()
const formData = {}
Object.keys(this.refs).map(key => (formData[key] = this.refs[key].value))
const axiosOptions = {
url: window.location.href,
method: "post",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
data: qs.stringify(formData),
}

axios(axiosOptions)
.then(response => {
this.setState({
feedbackMsg: "Votre demande a bien été envoyé.",
variant: 'success'
})
this.domRef.current.reset()
})
.catch(err =>
this.setState({
feedbackMsg: "Une erreur s'est produite.",
variant: 'danger'
})
)
}
render() {
return (
<div>
<h2>Me contacter.</h2>
<Row>
<Col xs={12} md={12}>
Actuellement, le développement web n'étant pas ma seule activité. Il est plus facile pour moi de communiquer par email : <a href="mailto:[e-mail]">[e-mail]</a>. <br />Vous pouvez également remplir le formulaire de contact ci-dessous.
</Col>
</Row>
<Row>
<form ref={this.domRef} name="Contact Form" method="POST" data-netlify="true" onSubmit={event => this.handleSubmit(event)}>
<input type="hidden" name="form-name" value="Contact Form" />
<Form.Group>
<Form.Label>Votre prénom / nom</Form.Label>
<Form.Control ref="name" name="name" />
</Form.Group>
<Form.Group>
<Form.Label>Votre adresse email</Form.Label>
<Form.Control ref="email" type="email" name="email" />
</Form.Group>
<Form.Group>
<Form.Label>Votre message</Form.Label>
<Form.Control ref="message" as={"textarea"} rows={"5"} name="message" />
</Form.Group>
{this.state.feedbackMsg && <Alert className={"mt-5"} variant={this.state.variant}>{this.state.feedbackMsg}</Alert>}

<Button type="submit" size={"lg"} className={"mt-5"}>Envoyer mon message</Button>
</form>
</Row>
</div>
)
}
}

联系人表单实际上是由Netlify检测到的，当预览构建时，我在Netlify日志中得到了这个:

2:49:27 PM: Detected form fields:
- name
- email
- message

我的表单也在netlify表单中列出。

但是当我提交时，什么都没有发生，404和表单数据没有添加到netflix表单UI。

Answer 1

这是因为你的模态没有在构建中呈现。

Netlify将分析你的HTML来找到数据。标签。但是在构建中，没有标签，因为JavaScript会在用户点击按钮时添加模态，而不是在构建时。

要解决这个问题，请遵循这个变通方法。在public/index.html中添加一个简单的HTML表单，如下所示，并确保隐藏它。

<form name="contact" netlify netlify-honeypot="bot-field" hidden>
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="message"></textarea>
</form>

然后在您的JSX表单(原始表单)中添加此<input type="hidden" name="form-name" value="value_of_name_attribute_in_form_tag" />

你可以在下面的链接获得完整的细节。

https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/

Answer 2

您的请求的问题是您在头中设置请求类型为application/x-www-form-urlencoded服务器期望表单编码的数据，但代码发送的是json编码的数据。

替换这部分代码，它应该可以工作:

const axiosOptions = {
url: window.location.href,
method: "post",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
data: new URLSearchParams(formData).toString(),
};