[Security] Ajax 로 POST 요청 보내기 위해 CSRF 토큰 담기

포스트를 쓸 때 추가하고 싶은 사진이 있으면 ajax 를 사용해서 서버에 업로드 하고 이를 textarea에 마크다운 태그를 추가하는 방식으로 포스트에 사진을 함께 올릴 수 있도록 구현하는중이당.. ㅎ 그러던 중 맞닥뜨린 것 포스팅!

 

- Ajax에 사진파일을 담아서 POST request를 날렸지만 돌아오는 건 HTTP Error 400 Bad request뿐 ㅜㅜ

 

- 그러다가 아예 서버에서 이를 handle하는 함수가 실행도 안되고 밴먹고있다는 걸 발견했다

 

- 진즉 에러메시지를 출력해보았더라면 좋았겠지만 나는 쪼르르 희종에게 질문

 

-> "CSRF token을 같이 보내줘야할걸?" 그래서 찾아보니 Ajax POST request 에 csrf token 담아 보내는 법이 여기 잘 나와있었다.

 

head 에 meta tag로

 

<meta name="csrf-token" content="{{ csrf_token() }}">

 

를 넣어준 다음 스크립트에 .ajax 코드부분 위쪽에 다음을 추가해주었다~

 

$.ajaxSetup({

beforeSend: function(xhr, settings) {

if (!/^(GET|HEAD|OPTIONS|TRACE)</span>/i.test(settings.type) && !this.crossDomain) {

xhr.setRequestHeader("X-CSRFToken", csrftoken);

}

}

});

 

드디어 다른 400 error를 만날 수 있었다고 한다

 

[출처] https://hjlog.me/post/101