39.Ajax 로그인 구현, CSRF

헤더설정

 

전송방식이 Ajax 방식인가.

• xhr.setRequestHeader("X-Request-With", "XMLHttpRequest")

CSRF 헤더 설정

• <meta id = "_csrf" name="_csrf" th:content="${_csrf.token}"/>
• <meta id="_csrf_header name="_csrf_header" th:content="${_csrf.headerName}" />

• var csrfHeader = $('meta[name="_csrf_header"]').attr('content')
• var csrfToken = $('meta[name="_csrf"]').attr('content')
• xhr.setRequestHeader(csrfHeader,csrfToken)

<script>
    function formLogin() {
        var username = $('input[name=username]').val();
        var password = $('input[name=password]').val();
        var data = {"username":username, "password":password };

        var csrfHeader = $('meta[name=_csrf_header]').attr('content');
        var csrfToken = $('meta[name=_csrf]').attr('content');

        $.ajax({
            type:"post",
            url:"/api/login",
            data:JSON.stringify(data),
            dataType:"json",
            beforeSend: function (xhr) {
                xhr.setRequestHeader(csrfHeader,csrfToken);
                xhr.setRequestHeader("X-Requested-With","XMLHttpRequest");
                xhr.setRequestHeader("Content-Type","application/json");
            },
            success: function (data) {
                console.log(data);
            },
            error: function (xhr, status, error) {
                console.log(error);
                window.location="/login?error=true&exception="+xhr.responseText;
            }
        });
    }
</script>