反应REST请求到Java后端失败

Question

我有一个简单的React表单。我正在尝试使用Fetch API将数据从此表单发送到我的Java后端。这是我的React Form文件：import React, {Component} from 'react';class Form extends Component {    constructor(props){        super(props);        this.state={value:""};    this.handleChange = this.handleChange.bind(this);    this.handleSubmit = this.handleSubmit.bind(this);}handleChange(event){    event.preventDefault();    this.setState({value:event.target.value});}handleSubmit(event){    event.preventDefault();    const data = new FormData(event.target);    fetch('http://localhost:8080/add/person', {      method: 'POST',      body: data    });}render(){    return(        <form onSubmit={this.handleSubmit}>            <label>Name:             <input type="text" value={this.state.value} onChange={this.handleChange} />            </label>            <input type="submit" value="Submit"/>        </form>    );      }}由于某种原因，当我处于调试模式时，数据变量始终具有空的JSON。在我的Java后端中，当我收到请求时，我看到的是空白表格数据。关于为什么我无法将数据发送到Java后端的任何想法？

Answer 1

您的问题与后端无关-fetch代码看起来正确。

FormData没有按照您的期望进行构建。您可以通过打开Chrome Devtools的“网络”标签并尝试查看请求的过程来解决此问题：空请求有效负载。

问题在于FormData构造函数的参数依赖于input具有name属性的表单中的每个属性，而您缺少该属性。如果添加（name="name"），则前端应按预期运行：

<input type="text" name="name" value={this.state.value} onChange={this.handleChange} />

编辑：根据您上面的对话，似乎您也有服务器端CORS问题。我的答案解决了您的原始问题，但是是的，您也需要解决CORS，最简单的方法可能是引用您所使用的任何Java框架的文档。这是一个非常常见的问题，应该在FAQ中。