Получение данных в запросе Spring, js/axios

349

29 октября 2017, 17:40

Здравствуйте. Пишу SPA приложение на бекенде есть Spring и вот такой метод в контроллере

@RequestMapping(path = "/sign-in", method = RequestMethod.POST)
public ResponseEntity signUp(@RequestParam(name = "login") String login,
                             @RequestParam(name = "password") String password) {
    User logged = userServiceDao.getByLogin(login);
    if (logged == null) {
        return new ResponseEntity<>("login error", HttpStatus.FORBIDDEN);
    }
    if (!bCryptPasswordEncoder.matches(password, logged.getPassword())) {
        return new ResponseEntity<>("password error", HttpStatus.FORBIDDEN);
    }
    return new ResponseEntity<>(authServiceToken.getAuthToken(logged), HttpStatus.OK);
}

и следующий компонент react

class MainLogin extends Component {
constructor(props) {
    super(props);
    this.state = {
        login : 'login',
        password : 'password'
    };
}
auth = () => {
    axios.post('http://localhost:8080/sign-in',  {
            login : 'login',
            password : 'password'
    }).then(function (resp) {
        console.log(resp);
    }).catch(function (e) {
        console.log(e);
    })
}

render() {
    return(
        <Grid>
            <Row>
                <PageHeader>Авторизация</PageHeader>
            </Row>
            <Row>
                <Col xsOffset={3} xs={6}>
                    <FormGroup>
                        <FormControl type="text" placeholder="Login"/>
                        <FormControl type="password" placeholder="Password"/>
                        <Button onClick={this.auth} bsStyle="primary" bsSize="large" block>Войти</Button>
                    </FormGroup>
                </Col>
            </Row>
        </Grid>
    );
}

}export default MainLogin;

дело в том, что когда отправляю данные в контроллер из postman, указываю параметры login,password, то всё отлично, мне в ответ прихоодит токен. Но когда отправляю с клиента те же данные, в ответ приходит 400 ошибка. Якобы запрос неверный и отсутствует параметр login и т.д. И вопрос в том, что я делаю не так? Я думаю, что axios формирует http запрос не в том виде, как его ожидает контроллер, но что именно не так я не пойму. И с какой стороны надо менять со стороны фронта или бекенда

Answer 1

Axios использует XMLHttpRequests. Следовательно отправляет на сервер JSON т.е. заголовок Content-Type присылается application/json, а ваш сервер ожидает x-www-form-urlencoded или form-data.

const { login, password } = this.state;
const data = new FormData();
data.append('login', login);
data.append('password', password);
axios.post('http://localhost:8080/sign-in', data);