본문 바로가기

ajax

(5)
ajax 에러 json 메세지 받기 (Spring Security, axios) 처음에는 다음처럼 코드를 작성했는데 프론트에서 메시지가 안 받아졌다. 알고보니 그냥 직접 write 해주니까 됐다. response.sendError(401, JsonUtil.toJson(errorResponseMap)); 순서 FailureHandler를 구현한다. FailureHandler에서 exception 내용을 보고 적절한 응답 메시지를 만든다. response에 ContentType을 json으로 설정하고 직접 write 한다. 예 FailureHandler를 구현한 다음 다음처럼 response에 바로 써주면 된다. response.setStatus(HttpServletResponse.SC_UNAUTHORIZED); response.setContentType("application/json..
jquery ajax 응답이 빈값일 때 parseError 발생하는 경우 오랜만에 공부(?) 하다가 하나 발견했다. $.ajax 응답이 빈값일 때 http 200에서도 오류로 떨어지는 현상 ##오류 jQuery ajax로 parseError가 발생한다. DB를 조회 했는데 값이 없어서 서버에서 null을 리턴했더니 jQuery .done으로도 들어오지 않고 .error로 들어가버렸다. 에러 내용은 parseError가 들어 있었다. 원인 $.ajax 옵션의 dataType이 원인이었다. dataType: json을 써놨더니 응답값이 올바른 json 값이 아니라 empty text라서 파싱할 수 없었던 것이다. 해결 해당 옵션을 삭제해주니 정상적으로 떨어졌다. 이렇게 처리는 성공했지만 응답값이 없을 경우 200이 아니라 204를 써야 할까? '옳은' 값이 무엇인지..
jQuery ajax - REST API 호출 시 HTTP 200에서 에러나는 경우 (HTTP 204) keywords: java, spring, rest controller, rest api, jquery ajax 오류 jQuery ajax로 REST API를 호출하여 정상적으로 저장 다 되고 HTTP 200을 리턴했는데 화면단에서 오류가 났다. $.ajax({ type: 'post' // ... 어쩌고저쩌고 }).done(function(){ console.log('success'); }).fail(function(jqXhr){ console.error(jqXhr); }); 컨트롤러에서는 이렇다. @PostMapping("/set-password") public ResponseEntity setPassword(@RequestBody Map payload) throws Exc..
Spring / jQuery ajax 사용시 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined 오류 오류 jQuery로 $.ajax 호출하는데 다음과 같은 오류가 발생했다. Uncaught TypeError: Cannot read property 'toLowerCase' of undefined 원인을 알아보니 스프링 시큐리티 csrf 설정 관련 오류이다. 사용자 인증 되지 않은 상태(비로그인)에서는 $(document).ajaxSend ajax 설정에서 token과 header가 null로 넘어가서 발생한 오류이다. 해결 token, header null 체크를 추가했다. 해결 전 $(function () { var token = $("meta[name='_csrf']").attr('content'); var header = $("meta[name='_..
axios 요청 응답 시 오버레이 로딩 이미지 띄우기 (axios beforeSend) 결론부터 jQuery ajax의 beforeSend 같은 기능을 axios에서 구현하고 싶다면, interceptor를 설정하면 된다. 오버레이 로딩, 스피너(뺑글뺑글 이미지) 등 여러가지 이름으로 불리지만, 어쨌든 마음에 드는 것을 쓰면 된다. 주의: 로딩 띄우는 것은 요청 전에만, 나머지는 로딩 오버레이를 꺼야한다. 지금은 Vue.js로 개발하고 있기 때문에 store에 loading이라는 상태를 만들고 app.vue에 오버레이 로딩 컴포넌트를 삽입하여 $store.state.loading을 참조하게 했다. mutation에는 startLoading, endLoading을 만들어 아래 인터셉터에서 스토어의 상태를 바꾼다. 아래 코드는 axios 공식 문서에서 주석만 수정한 것이다. 해당 위치에서 오버..