khane7
99
2019-04-18 15:25:40
7
488

SpringBoot + RESTful + Vuecli + axios post 호출에 관해 질문올립니다..



로그인을 위해 계정을 받아서 조회하는 부분입니다만...

RESTful 을 GetMapping 으로 호출하면 정상적으로 조회 작업이 됩니다...

하지만 PostMapping 을 하면 함수를 찾아오질 않네요...


하루종일 삽질하다 질문 올립니다...


tomcat은 8080,

npm server는 8081 로 돌리는 중이며,

해당 용청을 Postman으로 돌리니 브레이크 포인트까지 잘 걸리는데...

제가 어떤 부분을 놓친건지..

어처구니 없는 실수를 한것 같은데 원인을 찾을수 없네요 

꼭 좀 부탁드립니다...


LoginRestController.java

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/api/member")
public class LoginRestController extends ShopController {


	@Autowired
	MemberRepository memberRepository;


	/*@RequestMapping(value = "/doLogin", method = RequestMethod.OPTIONS)
	public boolean doLogin2 ( MemberVO memberVO ) {
		return true;
	}*/

	//	@RequestMapping(value = "/doLogin", method = RequestMethod.POST)
	@PostMapping("/doLogin")
	public MemberVO doLogin ( MemberVO memberVO ) {

		if ( memberVO.getUserId().isEmpty() || memberVO.getUserPasswd().isEmpty() ) {
			memberVO = null;
		} else {

			MemberVO getMember = memberRepository.findByUserId( memberVO.getUserId() );

			try {
				if (PasswordEncrypt.validatePassword(memberVO.getUserPasswd(), getMember.getUserPasswd())) {
					memberVO = getMember;
				}
			} catch (NoSuchAlgorithmException e) {
				e.printStackTrace();
			} catch (InvalidKeySpecException e) {
				e.printStackTrace();
			}
		}

		return memberVO;
	}


}



login.vue

axios.post( $APIs.url.member + "doLogin", {
	'userId' : this.userId,
	'userPasswd': this.userPasswd
}).then((result)=> {
	console.log(result)
})


LOG


2019-04-18 15:17:01.200 DEBUG 12976 --- [apr-8080-exec-1] o.s.web.servlet.DispatcherServlet        : OPTIONS "/api/member/doLogin", parameters={}
2019-04-18 15:17:01.201 DEBUG 12976 --- [apr-8080-exec-1] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped to public com.humanwares.web.shop.member.MemberVO com.humanwares.web.shop.apis.member.LoginRestController.doLogin(com.humanwares.web.shop.member.MemberVO)
2019-04-18 15:17:01.203 DEBUG 12976 --- [apr-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Completed 200 OK



Browser Console


Access to XMLHttpRequest at 'http://localhost:8080/api/member/doLogin' from origin 'http://localhost:8081' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
createError.js?2d83:16 Uncaught (in promise) Error: Network Error
    at createError (createError.js?2d83:16)
    at XMLHttpRequest.handleError (xhr.js?b50d:87)




실행을 했을 경우 POST가 아닌 OPTIONS 이라고 오는 부분은 여기 검색해보니

POST가 가능한지 먼저 확인하는 요청이라고 인지는 했습니다만 

Postman에서 되는거 보니,... vue 부분의 문제라고 의심중입니다...


0
0
  • 답변 7

  • 공부하는취준생
    745
    2019-04-18 15:35:10 작성 2019-04-18 15:40:53 수정됨

    멤버vo앞에

    @RequestBody or

    아니면 아이디랑 패스워드를 각각 리퀘스트파람 2개선언해서 테스트해보세요

    @RequestParam(value="memberId"),

    0
  • khane7
    99
    2019-04-18 15:38:54 작성 2019-04-18 15:39:25 수정됨

    안되네요...

    @RequestBody

    parameter를 Map으로 바꿔서 @RequestParam 도 해봤어요

    0
  • 공부하는취준생
    745
    2019-04-18 15:41:51

    맵으로 받지말고 리퀘스트파람 아이디랑 패스워드를 각각 받아보실래요?

    0
  • khane7
    99
    2019-04-18 15:48:35

    그것도 안되네요... 문제는 Postman으로 했을때는 로그에 바로 POST가 찍히는데...

    axios 실행은 OPTIONS가 먼저 요청되고..

    요청된 결과가 200 으로 정상 동작하는데 

    CORS 에러 나요..ㅠㅜ

    0
  • 공부하는취준생
    745
    2019-04-18 15:50:39
    음 그렇구나 저는 에이젝스로만 레스트통신해봐서 뭔가 옵션부분이 다른가보네요
    0
  • khane7
    99
    2019-04-18 16:41:46

    이런...

    jquery로 $.post로 하니까 되네요 ;;;

    axios의 post가 잘못되었는지 봐야겠네요... ㅜㅠ

    0
  • 무언가
    98
    2019-04-18 18:02:40
    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.