laravel - AJAX 전송 시 Content-Type 지정 (Error 405)

 

파일 업로드를 처리하는 폼 데이터를 AJAX 로 전송 시, 헤더에 Content-Type 을 지정해야 한다.

반드시 지정해야 하는 것은 아니지만 아래 오류가 발생할 수 있다.

 

Error Message

Error 405. The GET method is not supported for this route. Supported methods: POST.

 

axios 의 경우

 

헤더 지정

headers: {
    "Content-Type": "multipart/form-data",
}

 

전문

var data = new FormData(frm);

let axiosConfig = {
    headers: {
        "Content-Type": "multipart/form-data",
    }
}

axios.post(url, data, axiosConfig)
.then(function (response) {
    if(response.data == 'success') {
        alert('등록 되었습니다.');
        location.href = '/edu';
    } else {
        console.log(response);
    }
})

 

XMLHttpRequest 의 경우

 

헤더 지정

xhr.setRequestHeader("Content-type", "multipart/form-data");

 

전문

open - setRequestHeader - send 순서여야 한다.

var data = new FormData(frm);

var xhr = new XMLHttpRequest();
xhr.open('POST', '/edu-update', true);
xhr.setRequestHeader("Content-type", "multipart/form-data");

xhr.onload = function(e) {
    if(this.status == 200) {
        if(e.currentTarget.responseText == 'success') {
            alert('등록 되었습니다.');
            location.href = '/edu';
        } else {
        	console.log(e.currentTarget.responseText);
        }
    }
}

xhr.send(data);