axios 와 Rest API

삽질 삽질 개삽질.. 지미 프론트개발 안한지가 몇년인데..

API 를 만들었는데 post method 에서 문제가 발생

    @CrossOrigin("*")
    @ApiOperation(value = "로그인", notes = "이메일 회원 로그인을 한다.")
    @PostMapping(value = "/signin")
    public SingleResult<String> signin(@ApiParam(value = "회원ID : 이메일", required = true) @RequestParam String id,
                                       @ApiParam(value = "비밀번호", required = true) @RequestParam String password) {

        User user = userJpaRepo.findByUid(id).orElseThrow(CEmailSigninFailedException::new);
        if (!passwordEncoder.matches(password, user.getPassword()))
            throw new CEmailSigninFailedException();
        return responseService.getSingleResult(jwtTokenProvider.createToken(String.valueOf(user.getMsrl()), user.getRoles()));
    }

1. cors .. 

@CrossOrigin("*") 로 해결

 

2. content-type 관련 문제

@RequestBody 와 @RequestParam 에 대해서 테스트를 좀 더 해봐야 할듯..

 

API 건들기 싫어서  URLSearchParams() 에 넣어서 처리해서 해결했긴 했는데 찝찝

 

axios 내용

 

const login = {
    init: function () {
        var _this = this;
    }, // init end
    submit: function () {

        if (login.data.id() == false || login.data.password() == false) {
            return false;
        }
        const data = new URLSearchParams();
        data.append('id', login.data.id());
        data.append('password', login.data.password());
        const config = {
            headers: {"Accept": "application/json, text/plain, */*",
                "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"}
        }
        return axios.post(login.data.host() + "/v1/signin", data, config)
            .then(function (response) {
                console.log('response : ',response);
            });
    },
    data: {
        id: function () {
            let id = $.trim($("#id").val());
            if (id.length < 1) {
                //toastr.error('회원아이디 정보가 존재하지않습니다. 아이디를 입력해 주세요.')
                return false;
            }
            return id;
        },
        password: function () {
            let password = $.trim($("#password").val());
            if (password.length < 1) {
                //toastr.error('패스워드 정보가 존재하지않습니다. 패스워드를 입력해 주요.')
                return false;
            }
            return password;
        },
        host: function () {
            return $("#host").val();
        }
    }
};