Вход в Reactjs с использованием Fetch с Spring rest

Question

Я создал рабочий API веб-сервиса бэкэнда, используя Spring, протестированный на Postman.

Метод контроллера Spring:

@CrossOrigin
    @RequestMapping(value="/login", method=RequestMethod.POST, headers="Accept=application/json")
    public ServiceResponse userLogin(@RequestBody User loginUser) {

        User checkLogin= repository.findByEmail(loginUser.getEmail());

        if(checkLogin!=null) {
            System.out.println("User Exists");
            //Checking password
            if(checkLogin.getPassword().equals(loginUser.getPassword()))
                return ServiceResponse.createSuccessResponse();
            else
                return ServiceResponse.createFailureResponse("Invalid Password Entry. Please try again.");
        }
        else {
                return ServiceResponse.createFailureResponse("User email does not exists!");
        }

    }

И с помощью ReactJS я отображаю ответотправлено обратно из службы.

Реализация ReactJS:

constructor(){
        super()
        this.state={
            email:'',
            password:''
        }
    }

    handleEmail(text){
        this.setState({email:text.target.value})
    }
    handlePassword(text){
        this.setState({password:text.target.value})
    }

    login(){
        let obj={}
        obj.email=this.state.email;
        obj.password=this.state.password;

        fetch('http://localhost/login',
        {
            header:{
                "Accept": "application/json",
                "Content-Type": "application/json"
            },
            method:'POST',
            type:"cors",
            body:JSON.stringify({obj})

        }
        ).then(function(res){ return res.json(); })
        .then(function(data){ console.log( JSON.stringify( data ) ) })

    }

 render() {

        return (

       //User interface design for login implemented

);
}

Но я получаю

Не удается POST /

как ошибказаголовок страницы на новой пустой странице.Иногда я получаю предупреждение: Неподдерживаемый тип мультимедиа

Возможно, при получении службы я мог допустить ошибку.Кто-нибудь, пожалуйста, укажите или исправьте меня, где я ошибаюсь.

Answer 1

Вы можете сделать что-то вроде этого.

handleUserChange(event) {
    this.setState({
      username: event.target.value,
    });
};



<input type="text" value={this.state.username} onChange={this.handleUserChange} />

Answer 2

Использование метода выборки:

Примечание: выборка - это метод по умолчанию, поставляется с различными ОПЦИЯМИ.

 return fetch('http://localhost:6020/login',
       {
           headers:{  
               "Accept": "application/json",
               "Content-Type": "application/json"
           },
           method:'POST',
           body:JSON.stringify(user)
       }
       ).then(response => response.json()) // this line is important
       .then((response) => { 

           console.log( JSON.stringify( response ));

        });

Использование библиотеки axios:

axios.post('http://localhost:6020/login', user)
          .then(res=>{
              console.log(res);
              console.log(res.data);
          });

Answer 3

Из приведенного выше кода реакции я вижу, что вы не указали номер порта для вашего BackEnd Api.Это должно быть похоже на fetch('http://localhost:portNo/login',{}).