Uncaught TypeError: Illegal invocation

ajax에서 API로 Multipart 파일을 보내려는 중 발생한 오류이다.

 

아래는 문제의 내 코드이다.

$.ajax({
    url: '/api/exampleApi', // API 엔드포인트 URL
    type: 'POST', // 요청 방식 (GET, POST 등)
    data: formData, // 전송할 데이터
    contentType: false, // 전송할 데이터 타입
    dataType: false,
    success: function(response) {
        // 요청이 성공했을 때 실행할 코드
        console.log('Success:', response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // 요청이 실패했을 때 실행할 코드
        console.error('Error:', textStatus, errorThrown);
    }
});

무엇이 잘못됐을까?

<ProcessData>

AJAX 통신에서 일반적으로 서버에 전달되는 데이터는 query string 형태이다.

ex) http://example.com?name=lee&no=1

data 파라미터로 전달된 데이터를 jQuery 내부적으로 query string 형태로 만드는 데, 파일 전송의 경우 불가능하므로 processData를 false 로 설정해야한다.

 

<ContentType>

보내는 데이터의 타입을 의미한다. 기본값은 application/x-www-form-urlencoded 이고, 흔히는 application/json; charset-utf-8 이 쓰인다. 기본 타입으로는 파일이 전송 안되기 때문에 false 로 설정해야한다.

 

아래는 수정된 내 코드이다.

$.ajax({
    url: '/api/exampleApi', 
    type: 'POST', 
    data: formData, 
    contentType: false, 
    dataType: false,
    processData: false, // 이 부분 추가됨!!!!!!
    success: function(response) {
        console.log('Success:', response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('Error:', textStatus, errorThrown);
    }
});