[Spring / Vue] Spring과 Vue를 연동시 주소로 입력하면 오류나는 문제

Spring과 Vue를 연동시 주소로 입력하면 오류나는 문제

Spring과 Vue를 연동하여 같이 실행되도록 하고 vue의 router-link를 통해서 페이지를 이동하면 문제가 없으나 주소창의 URL을 직접 입력하거나 새로고침을 할경우 404에러가 발생하는 문제가 생겼습니다.

🏷️ 원인

SPA(Single Page Application)는 말 그대로 단일 페이지에 동적으로 내용을 변경하여 웹 페이지를 구성하게됩니다. SPA의 모든 경로는 결국 단일 페이지(index.html)로 향하게 되어있기 때문에 다른 경로에서 새로고침을 한다면 그 경로로 GET 요청을 보내는 것과 같기 때문에 404 해당 경로를 찾을 수 없는 에러가 발생하게 됩다.

 

즉, vue.js에서 라우팅을 통해 페이지 이동을 하지 않고 브라우저 주소 창에 직접 경로를 입력하거나 새로고침을 하면 에러가 발생하게 됩니다. 예를들어 http://localhost:8080/home 경로를 뷰의 라우팅 기법으로  /home에 해당되는 컴포넌트(페이지)를 가져와 화면에 보여줍니다. 하지만 URL을 주소창에 직접 입력하거나 저 경로에서 새로고침을 하면 GET http://localhost:8080/home요청이 서버로 넘어가면서 404 에러를 띄우게 됩니다.

🏷️ 해결방법

이 문제의 해결방법은 아래처럼 404 에러가 발생했을 때 이동되는 /error 경로를 spirng에서 매핑하여 모든 주소를 SPA로 사용되는  index.html 단일 페이지로 이동시켜주면 됩니다.

@Controller
public class ErrorPageController implements ErrorController {

    @GetMapping("/error")
    public String redirectRoot() {
        return "index.html";
    }
}

📖 Reference

덕구네