将 REST 请求响应到 Java 后端失败答案

【问题标题】：React REST request to Java backend failing将 REST 请求响应到 Java 后端失败
【发布时间】：2018-07-03 23:43:59
【问题描述】：

我有一个简单的 React 表单。我正在尝试使用 Fetch API 将此表单中的数据发送到我的 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>
    );  
    }
}

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

关于为什么我无法将数据发送到我的 Java 后端的任何想法？

编辑：我还想指出，我的前端托管在 localhost:3000 上，而我的 Java 后端服务器位于 localhost:8080

【问题讨论】：

当您打开控制台时，您是否会因为不同的主机而遇到 CORS 问题？
是的！我在控制台中收到以下错误：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'localhost:3000' 不允许访问。响应的 HTTP 状态代码为 500。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源
这个应用是用Create React App创建的吗？
是的。这是导致这个问题的原因吗？
在下面更新了我的答案。

标签： java reactjs fetch

【解决方案1】：

为什么不直接使用 state 中存储的值提交数据？

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

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

更新：在您的 package.json 中添加 "proxy": "http://localhost:8080" 如果这不起作用，您将不得不使用类似的东西打开它，但对于您在后端使用的任何框架。

https://www.npmjs.com/package/cors#enabling-cors-pre-flight

http://www.baeldung.com/spring-cors

正如@Tadas Antanavicius 所说，您的输入也缺少名称值。这是一篇关于您尝试对代码执行的反应部分的简短的中篇文章。您甚至可以从输入字段中删除您的 onChange。 https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f

【讨论】：

感谢约书亚的回复！我想单独提交表单数据，这就是为什么我试图将表单数据转换为 FormData() 对象，然后将其发送到
设置代理有效。现在我没有收到任何与 CORS 相关的错误。但是，我的后端仍然无法从前端获取任何数据
您是否在输入中添加了名称？
是的，我做到了。它对我有用的方式是我必须从 FormData() 对象中收集键值对并创建一个新的 JSON 对象，该对象最终成为请求负载

【解决方案2】：

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

FormData 没有按照您的预期构建。您可以通过打开 Chrome Devtools 的网络选项卡来尝试此操作，并在请求通过时查看请求：空请求有效负载。

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

&lt;input type="text" name="name" value={this.state.value} onChange={this.handleChange} /&gt;

编辑：根据您的上述对话，您似乎也有服务器端 CORS 问题。我的回答解决了您最初的问题，但是是的，您还需要解决 CORS 问题，最简单的方法可能是参考您正在使用的任何 Java 框架的文档。这是一个很常见的问题，应该在常见问题解答中。

【讨论】：

感谢您的回答！我正在查看数据。非常感谢！