CKEditor5 이미지 업로드 시 JSON 응답 오류 해결

❗ 오류 상황

CKEditor5에서 이미지를 업로드하려고 할 때 다음과 같은 오류가 발생

SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON

 

또는 크롬 콘솔 오류

POST http://localhost:8080/editor/uploadImage 200 (OK)
Unexpected token '<'

 

브라우저에는 이미지가 깨진 상태로 나타나고, 콘솔에는 JSON 파싱 실패 오류가 발생

 

🎯 원인

CKEditor5는 이미지 업로드 시 fetch를 통해 서버에 이미지를 전송, 반드시 아래와 같은 JSON 형식의 응답을 기대

{
  "url": "/editor/image?name=파일명.png"
}

서버에서 다음과 같은 잘못된 응답을 반환하면 오류 발생

• HTML 문서 전체 (예: JSP 페이지)

• 문자열 "error" 또는 "false" (JSON 형식이 아님)

• 빈 문자열

• JSON 형식처럼 보이지만 "Content-Type"이 text/html로 되어 있음

즉, JSON이 아닌 응답을 받아서 CKEditor에서 파싱하다가 오류가 나는 것

 

✅ 해결 방법

 

✅ 서버 (Spring Controller)에서 응답을 반드시 JSON 형식으로 설정

@PostMapping("/editor/uploadImage")
@ResponseBody
public ResponseEntity<Map<String, Object>> uploadImage(@RequestParam("upload") MultipartFile file) {
    try {
        String imageUrl = "/editor/image?name=" + 저장된파일명;
        return ResponseEntity.ok(Map.of("url", imageUrl));  // JSON 응답
    } catch (Exception e) {
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
                             .body(Map.of("error", "이미지 업로드 실패"));
    }
}

• 반드시 Map.of(...) 또는 DTO 사용

• @ResponseBody 또는 @RestController 필수

• 응답 Content-Type은 자동으로 application/json이 설정됨

 

✅ 클라이언트 (JS)에서 JSON 응답만 처리

fetch('/editor/uploadImage', {
  method: 'POST',
  body: formData
})
.then(response => response.json())  // JSON 응답만 받아야 함
.then(data => {
  if (data.url) {
    resolve({ default: data.url });
  } else {
    printSweetAlert("error", "이미지 업로드 실패", "다시 시도해주세요.");
    reject("서버 에러 응답");
  }
})
.catch(error => {
  printSweetAlert("error", "통신 오류", "서버와의 연결에 문제가 있습니다.");
  reject(error);
});

• HTML이 반환될 경우 response.json() 단계에서 에러 발생함

• resolve() 또는 reject() 호출에 따라 에디터 UI에 바로 반영됨

 

📌 부가 팁

1. JSP 내에서 <script>window.alert = function(){};</script> 설정으로 기본 alert 차단 → SweetAlert 사용

2. editor.js, updateBoard.js처럼 기능별로 JS를 분리하면 유지보수에 유리

3. 이미지 저장은 application.properties의 upload.path와 연동하여 관리