헤더와 토큰

Ajax에서 헤더에 토큰을 넣어서 보내보자

Ajax에서 헤더 부분에 Content-type혹은 토큰 정보를 넣어서 보내야 할 때가 있다.
이럴 때는 beforeSend를 사용한다

function getInform() {
    var token = localStorage.getItem("token");
    $.ajax({
        type: "POST",
        url: "/getEmployeeInformation",
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Content-type","application/json");
            xhr.setRequestHeader("Authorization","JWT " + token);
        },
        success: function (res) {
            console.log(res);
        }
    });
}

다른 예제도 보자

function to_ajax(){
 
    $.ajax({
        type : 'get',
        url : '/test.jsp,
        dataType : 'xml',
        beforeSend : function(xhr){
            xhr.setRequestHeader("ApiKey", "asdfasxdfasdfasdf");
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        },
        error: function(xhr, status, error){
            alert(error);
        }
        success : function(xml){
            alert(xml)
        },
    });
}

이것도 다른예제.

jwt, Content-type등 헤더부분을 추가할 때 beforeSend에 넣어주면 된다고 동일하게 얘기하고 있다.
이 예제는 header부분에 Content-type과 JWT토큰을 추가하는 예제이다.

function test() {
    var token = localStorage.getItem("token");
    $.ajax({
        type: "GET",
        url: "/api/test",
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Content-type","application/json");//header추가
            xhr.setRequestHeader("Authorization","JWT " + token);//header추가
        },
        success: function (res) {
            console.log(res);
        }
    });
}

다른 예제도 몇가지 보자

meta 태그 안에있는 content를 가져와서
Ajax beforeSend(데이터를 전송하기전) 에 HTTP Header를 SET 해준다고 한다.
스프링에서 Spring Security 를 쓰게 되면 꼭 해줘야 한다.
Ajax호출시 토큰값을 헤더에 잘 넘겨주기만 하면 된다는것이 포인트
서버단에서 딱히 할것은 없다.

$(function() {
        $("#ajaxCall").click(function(){
            ajaxCall();
        });
    });
    
    function ajaxCall(){
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        var name = $("#userName").val();
        
        var jsonData = {
            "name" : name
        }
        
        $.ajax({
            type: 'POST',
            contentType: "application/json",
            url:'/csrf/ajax',
            data: JSON.stringify(jsonData), // String -> json 형태로 변환
            beforeSend : function(xhr)
            {   /*데이터를 전송하기 전에 헤더에 csrf값을 설정한다*/
                xhr.setRequestHeader(header, token);
            },
            dataType: 'json', // success 시 받아올 데이터 형
            async: true, //동기, 비동기 여부
            cache :false, // 캐시 여부
            success: function(data){
                console.log(data.name);
            },
            error:function(xhr,status,error){
                console.log('error:'+error);
            }
        });
    }