响应REST请求到Java后端失败

我有一个简单的反应形式。我正在尝试使用FetchAPI将此表单中的数据发送到我的Java后端。这是我的React表单文件：

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>
    );  
    }
}

import React，{Component}来自'React'；
类形式扩展组件{
建造师（道具）{
超级（道具）；
this.state={value:：}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
event.preventDefault（）；
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
event.preventDefault（）；
const data=新表单数据（event.target）；
取（'http://localhost:8080/add/person', {
方法：“POST”，
正文：数据
});
}
render（）{
返回(
姓名：
);  
}
}

出于某种原因，当我处于调试模式时，数据变量总是有一个空JSON。在我的Java后端，当我收到请求时，我看到的是空白表单数据

关于为什么我不能将数据发送到Java后端，有什么想法吗

---

编辑：我还想指出，我的前端托管在localhost:3000上，而我的Java后端服务器托管在localhost:8080上，为什么不使用存储在state中的值提交数据呢

handleSubmit(event){
    event.preventDefault();
    const data = this.state.value; //change here

    fetch('http://localhost:8080/add/person', {
      method: 'POST',
      body: data
    });
}

更新：在您的package.json中添加

“代理”：http://localhost:8080“

如果这不起作用，您将不得不使用类似的方法打开它，但您在后端使用的框架是什么

正如@Tadas Antanavicius所说，您的输入也缺少名称值。这是一篇关于代码的react部分的中短篇文章。您甚至可以从输入字段中删除onChange。

---

为什么不使用状态中存储的值提交数据

handleSubmit(event){
    event.preventDefault();
    const data = this.state.value; //change here

    fetch('http://localhost:8080/add/person', {
      method: 'POST',
      body: data
    });
}

更新：在您的package.json中添加

“代理”：http://localhost:8080“

如果这不起作用，您将不得不使用类似的方法打开它，但您在后端使用的框架是什么

正如@Tadas Antanavicius所说，您的输入也缺少名称值。这是一篇关于代码的react部分的中短篇文章。您甚至可以从输入字段中删除onChange。

---

您的问题与后端无关-

fetch

代码看起来是正确的

FormData

未按预期构建。您可以通过打开ChromeDevTools的“网络”选项卡来尝试这一点，并在请求经过时观察它：清空请求负载

问题在于

FormData

构造函数的参数依赖于表单中的每个

输入

，而表单中的每个

输入都有一个
名称
属性，而您缺少该属性。如果添加它，（
name=“name”
）前端的行为应符合预期：


您的问题与后端无关-提取
代码看起来是正确的

FormData
未按预期构建。您可以通过打开ChromeDevTools的“网络”选项卡来尝试这一点，并在请求经过时观察它：清空请求负载

问题在于
FormData
构造函数的参数依赖于表单中的每个
输入
，而表单中的每个
输入都有一个
名称
属性，而您缺少该属性。如果添加它，（
name=“name”
）前端的行为应符合预期：


谢谢你的回复约书亚！我想单独提交表单数据，这就是为什么我试图将表单数据转换为FormData（）对象，然后将其发送到设置代理工作的路径。现在我没有收到任何与CORS相关的错误。但是，我的后端仍然无法从前端获取任何数据。您是否在输入中添加了名称？是的，我添加了。它对我的工作方式是，我必须从FormData（）对象收集键值对，并创建一个新的JSON对象，该对象最终成为请求的有效负载感谢Joshua的回复！我想单独提交表单数据，这就是为什么我试图将表单数据转换为FormData（）对象，然后将其发送到设置代理工作的路径。现在我没有收到任何与CORS相关的错误。但是，我的后端仍然无法从前端获取任何数据。您是否在输入中添加了名称？是的，我添加了。它对我的工作方式是，我必须从FormData（）对象收集键值对，并创建一个新的JSON对象，当您打开控制台时，它最终成为请求的有效负载。您是否因为不同的主机而遇到CORS问题？是的！！！我在控制台中遇到以下错误：请求的资源上不存在“Access Control Allow Origin”头。因此，不允许访问源“”。响应的HTTP状态代码为500。如果不透明响应满足您的需要，请将请求的模式设置为“无cors”，以获取禁用cors的资源。此应用程序是使用
Create React app
创建的。是的。这是导致此问题的原因吗？更新了我下面的答案。当您打开控制台时，是否由于不同的主机而导致CORS问题？是！！！我在控制台中遇到以下错误：请求的资源上不存在“Access Control Allow Origin”头。因此，不允许访问源“”。响应的HTTP状态代码为500。如果不透明响应满足您的需要，请将请求的模式设置为“无cors”，以获取禁用cors的资源。此应用程序是使用
Create React app
创建的。是的。这是导致这个问题的原因吗？更新了我下面的答案。谢谢你的回答！我看到了数据。非常感谢！谢谢你的回答！我看到了数据。非常感谢！