ajax 호출시 발생하는 jquery.js: Uncaught TypeError: Cannot read property 'toLowerCase' of undefined 오류에 관한 해결 방법

개발환경

• thymeleaf 3.0.11
• Spring Boot 2.2.5
• IntelliJ Ultimate 2020.1
• JDK 8
• jQuery 2.1.4
• Gradle
• webpack

발생

회원가입 화면 개발중에 아이디 중복체크를 위해 ajax 사용 시 toLowerCase를 찾을 수 없다는 오류가 발생

form 태그는 사용하지 않음.

 

 

오류 stack strace

jquery.js:9463 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at Object.setRequestHeader (jquery.js:9463)
    at Object.beforeSend (util.js:11)
    at Function.ajax (jquery.js:9640)
    at Module.ajax (util.js:3)
    at Object.checkDuplicate (login.js:86)
    at HTMLAnchorElement.<anonymous> (login.js:41)
    at HTMLAnchorElement.dispatch (jquery.js:5429)
    at HTMLAnchorElement.elemData.handle (jquery.js:5233)
setRequestHeader @ jquery.js:9463
beforeSend @ util.js:11
ajax @ jquery.js:9640
ajax @ util.js:3
checkDuplicate @ login.js:86
(anonymous) @ login.js:41
dispatch @ jquery.js:5429
elemData.handle @ jquery.js:5233

원인

Spring Security 프레임워크의 csrf 기능을 사용 중인데 html head에 csrf meta 정보를 추가하여 ajax 콜 시 같이 넘겨줘야 하는데, ajax 콜에서는 넘기도록 했으나, html head 태그에 meta 정보가 없었음.

해결

아래 사진처럼 head 태그에 csrf 토큰값을 추가함.

csrf 메타정보

Thymeleaf 2.1 이상 버전부터는 form 태그에 th:action 속성을 사용하면 csrf 토큰이 내부적으로 추가된다고 함

---

공부하면서 적은 내용이라 맞지 않는 부분이 있을 수 있습니다. 피드백 주시면 공부하여 반영하겠습니다.