ajax 415 에러 해결

프로젝트 진행 중 415에러 발생.

415는 공부시작하고 나서 매 프로젝트마다 ajax를 사용했음에도 처음봄............

원인을 찾아보니 클라이언트가 서버에 지원되지 않는 요청을 보냈기에 서버에서 거절한 경우 발생하는 것이라고 한다.

<form id="form">
	<div>
    	<input type="text" name="productName">
    </div>
    <div>
    	<input type="text" name="productColor">
    </div>
    <div>
	<input type="file" name="imgFile" value="파일 선택" multiple>
	</div>
</form>
<button type="button" id="formSub">버튼</button>

$(document).ready(function(){
	$("#formSub").on('click', function(){
    	var form = ("#form")[0];
    	var formData = new FormData(form);
    
    	for(var index = 0; index < Object.keys(imgFile).length; index++){
    		formData.append('imgFile', imgFile[index]);
    	}
    
    	$.ajax({
    		url: '/addProduct',
        	enctype: 'multipart/form-data',
        	contentType: false,
        	processData: false,
        	type: 'post',
        	dataType: 'JSON',
        	data: formData,
        	success: function(result){
       			if(result == -1)
            		alert('업로드 실패');
            	else
            		location.href="productList";
        	}
    	});
    });
});

@PostMapping("/addProduct")
@ResponseBody
public void addProduct(ProductVO productVO
                 , @ReqeustParam("imgFile") List<MultipartFile> imgFile) throws Exception{
	log.info(productVO);
    
    for(MultipartFile image : imgFile){
      log.info(image.getOriginalFilename());
    }
}

이렇게 작성했으나 에러가 발생한것. 내가 어디를 빼먹었나 잘못 작성했나 해서 이전에 했던 프로젝트들 뒤져봤지만

문제점을 찾지 못했다.

 

구글링으로 찾아보니 일반적인 문제로는 컨트롤러에서는 json타입으로 받는데 보내는 데이터 타입이 json이

아닌 경우가 많은 것 같다.

그래서 보통 JSON.stringify()를 사용해 json형태로 바꿔주는것.

그리고 위 ajax부분에 작성한것 처럼 contentType을 false가 아닌 'application/json'형태로 바꿔주는 것이다.

contentType은 default가 application/x-www-form-urlencoded라고 한다.

그래서 만약 json으로 보내겠다고 명시하지 않은 상태에서 form데이터가 json형태가 아니라면 그냥 default형태로

넘어가기 때문에 오류가 발생한다고 볼 수 있다.

 

단, 이경우는 multipart를 사용하지 않는 경우. 즉, 폼 데이터만을 ajax로 넘겨야할 경우에만 사용하는 방법이고

진행하는 프로젝트처럼 파일을 넘기고자 한다면 type이 'multipart/form-data'형태로 전송해야 하기 때문에

false로 해야 한다.

 

그리고 컨트롤러에서도 상황에 따라 @ResponseBody와 @RequestBody를 사용해 받아주는 형태로 처리할 수 있다.

 

 

https://blog.naver.com/writer0713/221853596497

[Spring] Post 요청과 Content-Type의 관계

이분이 정리를 잘 해주셔서 도움이 많이 되었다.

 

 

여기서 의문이 'FormData를 사용해 form을 처리해줬으면 문자열로 변환되어 문제가 발생하지 않을텐데

왜 415가 사라지지 않는가' 

 

 

내 경우는 문제가 form안에 file부분이 들어가있는것이 문제였다.

이것저것 방법을 다 써봐도 해결이 안되길래 뭐가 문젠가... 하고 있던 와중에 ajax에러에 뭔가 나올것 같아서

에러를 출력하도록 바꿔서 확인해보니 Unexpected end of json input 라는 부분이 추가로 출력되었다.

즉, json타입의 끝이 이상하다는 것이다.

 

그래서 form을 console로 찍어보니 끝에 length 어쩌구.......

데이터는 하나도 안찍힌다.

 

length가 왜??? 이러다가 jsp를 다시 확인해보니 form안에 파일 input이 있길래 설마 하면서

form밑으로 빼보니 너무 잘된다 ㅠㅠ

 

<form id="form">
	<div>
    	<input type="text" name="productName">
    </div>
    <div>
    	<input type="text" name="productColor">
    </div>
</form>

<div>
  <input type="file" name="imgFile" value="파일 선택" multiple>
</div>

<button type="button" id="formSub">버튼</button>

 

다른 코드는 하나도 안건드리고 이것만 뺐더니 너무 잘된다...ㅎㅎ

 

 

내 오류에 대한 원인은 file의 경우는 json에 포함될 수 없는데 form안에 같이 있으면서 한번에 변환하고자 했기 때문에 발생한 문제같다.

 

그렇다고 한번에 보낼 수 있는 방법이 없는것은 아니다.

 

https://medium.com/jaehoon-techblog/simpleblog-%EA%B0%9C%EB%B0%9C-%EC%9D%BC%EC%A7%80-4-55a8d2a8604

simpleBlog 개발 일지 (4)

 

이분이 한번에 보내는 방법에 대해 잘 포스팅 해주셨다.

다음 프로젝트에서 써먹어봐야지!