안녕하세요. 엔지엠소프트웨어입니다. Spring boot와 React+Typescript로 프로젝트를 진행중에~ Whitelabel Error Page - There was an unexpected error (type=Not Found, status=404) 에러가 발생했습니다. 이 에러는 내용에서 알 수 있듯이 페이지를 찾을 수 없어서 발생하는 문제입니다. 상태 코드도 400번대니까 당연히 Frontend쪽 문제입니다. 물론, 수정은 서버에서 했지만요^^;

스프링 프로젝트를 구동하면 처음에 무조건 resources/static의 index.html 파일을 찾습니다. 스프링과 리액트를 같이 배포하기 때문에 리액트 빌드 파일들을 모두 resources/static에 추가하도록 [ gradle.build ]를 설정 해줬습니다. 이렇게 배포하고 실행하면 문제없이 잘 동작합니다. 하지만, 페이지를 이동하면서 라우터를 통하지 않고 뒤로가기나 새로고침을 누르면 에러가 발생합니다. 리액트는 SPA 아키텍쳐를 사용합니다. 그래서, index.html이 실행된 후 라우터가 해당 페이지에서 논리적으로 페이지를 로딩해줍니다. 계속해서 index.html을 사용하며 떠나지는 않습니다. 스프링 위에서 리액트를 실행했기 때문에 URL 매핑에서 이동하려는 페이지(html)를 찾아야 하는데 이게 없기 때문에 에러를 발생시키게 됩니다. 다양한 방법으로 이 문제를 회피할 수 있는데요. Backend, Frontend 양쪽 모두 해결 방법은 있습니다.

이 문제를 좀 더 쉽게 해결하려면 Backend에서 WebController를 하나 만들어서 루트에서 에러가 발생하는 경우 index.html 페이지를 리턴해주면 됩니다. 코드는 아래와 같습니다.

package com.bistelligence.optima.controller.base;

import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class WebController implements ErrorController {
    @GetMapping({"/", "/error"})
    public String index() {
        return "index.html";
    }
}

대부분의 글들에서 getErrorPath를 오버라이딩하라고 되어 있을겁니다. 스프링 2.4버전 이후로 ErrorController에서 해당 메소드가 삭제되서 더이상 사용할 필요는 없습니다. 위에 구현된 루트에서 에러가 발생할 때 기본 페이지인 index.html을 되돌려주면 간단하게 해결할 수 있습니다.

개발자에게 후원하기

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~