No message available (SpringBoot - REST-AJAX)

오늘 에러를 잡을 놈은 No message available 이다.. 

 

 

# No message available

 

스프링부트 + 메이븐 + thyeleaf + jpa + ajax 인데, REST 기반으로 파일 업로드 작업을

하는 와중에, No message available 메시지가 계속 떴다.

 

 

아직 잘 모르는 초짜라.. 이리저리 방법을 바꿔봤는데도 불구하고 같은 에러가 뜨는 건

내 프로젝트에 문제가 있다는 점이다. 

 

# script

 

'use strict';

var singleUploadForm = document.querySelector('#singleUploadForm');
var singleFileUploadInput = document.querySelector('#singleFileUploadInput');
var singleFileUploadError = document.querySelector('#singleFileUploadError');
var singleFileUploadSuccess = document.querySelector('#singleFileUploadSuccess');

var multipleUploadForm = document.querySelector('#multipleUploadForm');
var multipleFileUploadInput = document.querySelector('#multipleFileUploadInput');
var multipleFileUploadError = document.querySelector('#multipleFileUploadError');
var multipleFileUploadSuccess = document.querySelector('#multipleFileUploadSuccess');

function uploadSingleFile(file) {
    var formData = new FormData();
    formData.append("file", file);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/uploadFile", true);
    

    xhr.onload = function() {
        console.log(xhr.responseText);
        var response = JSON.parse(xhr.responseText);

        alert(xhr.responseText);
        if(xhr.status == 200) {
        	alert('성공?');
            singleFileUploadError.style.display = "none";
            singleFileUploadSuccess.innerHTML = 
  			"<p>File Uploaded Successfully.</p><p>DownloadUrl : <a href='" + response.fileDownloadUri + "' target='_blank'>" 
  			+ response.fileDownloadUri + "</a></p>";
            singleFileUploadSuccess.style.display = "block";
        } else {
        	alert('실패?');
            singleFileUploadSuccess.style.display = "none";
            singleFileUploadError.innerHTML = (response && response.message) || "Some Error Occurred";
        }
    }
    

    xhr.send(formData);
}

function uploadMultipleFiles(files) {
    var formData = new FormData();
    for(var index = 0; index < files.length; index++) {
        formData.append("files", files[index]);
    }

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/uploadMultipleFiles");

    xhr.onload = function() {
        console.log(xhr.responseText);
        var response = JSON.parse(xhr.responseText);
        if(xhr.status == 200) {
            multipleFileUploadError.style.display = "none";
            var content = "<p>All Files Uploaded Successfully</p>";
            for(var i = 0; i < response.length; i++) {
                content += "<p>DownloadUrl : <a href='" + response[i].fileDownloadUri + "' target='_blank'>" 
  				+ response[i].fileDownloadUri + "</a></p>";
            }
            multipleFileUploadSuccess.innerHTML = content;
            multipleFileUploadSuccess.style.display = "block";
        } else {
            multipleFileUploadSuccess.style.display = "none";
            multipleFileUploadError.innerHTML = (response && response.message) || "Some Error Occurred";
        }
    }

    xhr.send(formData);
}

singleUploadForm.addEventListener('submit', function(event){
    var files = singleFileUploadInput.files;
    alert(files.length);
    if(files.length === 0) {
        singleFileUploadError.innerHTML = "Please select a file";
        singleFileUploadError.style.display = "block";
    }
    uploadSingleFile(files[0]);
    event.preventDefault();
}, true);


multipleUploadForm.addEventListener('submit', function(event){
    var files = multipleFileUploadInput.files;
    if(files.length === 0) {
        multipleFileUploadError.innerHTML = "Please select at least one file";
        multipleFileUploadError.style.display = "block";
    }
    uploadMultipleFiles(files);
    event.preventDefault();
}, true);

 

전체 구조를 다 올리고 싶지만, 그건 나중에 파일 업로드 포스팅을 할 때 하고,

지금은 에러가 난 부분을 위주로 정리해보겠다!

 

우선 위의 에러 내용은 xhr.responseText 에서 나오는 것이다.

특이한게 POST Mapping을 찾지는 못하지만, 같은 REST Controller 안의 GET Mapping은

찾아서 반응한다.

 

# RestController 

@Log
@RestController
public class FileController {
	
    private static final Logger logger = LoggerFactory.getLogger(FileController.class);

    @Autowired
    private FileStorageService fileStorageService;
    
    @PostMapping("/uploadFile")
    public UploadFileResponse uploadFile(@RequestParam("file") MultipartFile file) {
    	System.out.println("---------------uploadFile");
    	log.info("uploadFile");
    	
        String fileName = fileStorageService.storeFile(file);

        String fileDownloadUri = ServletUriComponentsBuilder.fromCurrentContextPath()
                .path("/downloadFile/")
                .path(fileName)
                .toUriString();

        return new UploadFileResponse(fileName, fileDownloadUri,
                file.getContentType(), file.getSize());
    }

    @PostMapping("/uploadMultipleFiles")
    public List<UploadFileResponse> uploadMultipleFiles(@RequestParam("files") MultipartFile[] files) {
        return Arrays.asList(files)
                .stream()
                .map(file -> uploadFile(file))
                .collect(Collectors.toList());
    }

    @GetMapping("/downloadFile/{fileName:.+}")
    public ResponseEntity<Resource> downloadFile(@PathVariable String fileName, HttpServletRequest request) {
        // Load file as Resource
        Resource resource = fileStorageService.loadFileAsResource(fileName);

        // Try to determine file's content type
        String contentType = null;
        try {
            contentType = request.getServletContext().getMimeType(resource.getFile()
  			.getAbsolutePath());
        } catch (IOException ex) {
            logger.info("Could not determine file type.");
        }

        // Fallback to the default content type if type could not be determined
        if(contentType == null) {
            contentType = "application/octet-stream";
        }

        return ResponseEntity.ok()
                .contentType(MediaType.parseMediaType(contentType))
                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" 
  				+ resource.getFilename() + "\"")
                .body(resource);
    }
    
    @RequestMapping("/uploadFile")
	public void forGues() {
		log.info("file==========================");
	}

}

혹시 csrf 아닐까????

 

두둥.. 방금 프로젝트 새로 빌딩하고 했는데,, 된다.. 이건 필히 csrf 때문이다...

그러고보니 GET은 되는데, POST 나 PUT, Delete 가 안되는거면 Security 때문이었네..

 

일단 이정도까지 하고, 시큐러티에서 csrf 전송하는 거 방안을 알아봐야겠다.

그냥 Form 태그 안에 넣는거로는 안되던데..

 

하.. 하던걸로 다 해봤는데 안되고,, security 안 깐 새로운 프로젝트에서 정상작동하는데

거기다가 security 다시 까니까 똑같은 오류가 뜬다.

 

하............ 일단 다른거 하자