反应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&nbsp;type="text"&nbsp;name="name"&nbsp;value={this.state.value}&nbsp;onChange={this.handleChange}&nbsp;/>编辑：根据您上面的对话，似乎您也有服务器端CORS问题。我的答案解决了您的原始问题，但是是的，您也需要解决CORS，最简单的方法可能是引用您所使用的任何Java框架的文档。这是一个非常常见的问题，应该在FAQ中。