Реакция REST-запроса на сбой бэкэнда Java

Question

У меня есть простая форма React. Я пытаюсь отправить данные из этой формы с помощью Fetch API в мой бэкэнд Java. Вот мой файл формы ответа:

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

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.

Answer 2

почему бы просто не отправить свои данные, используя значение, хранящееся в состоянии?

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