[vue.js] vue & springboot 404 에러

참고문서

https://gilu-world.tistory.com/m/107

 

 

vue.js에서 history 모드를 사용하여 작업을 진행하게 될 경우 제일 먼저 맞이하게 되는 에러죠...

 

 

 

 

 

 

 

 

 

바로 history mode로 적용하고 원하는 페이지로 접근하기 위해 url을 직접 입력하거나 새로고침을 하게 되면 바로 위와 같은 404 에러 페이지를 보실 수 있게되죠...

 

 

왜...이러나 찾아본 결과!

 

원인은 vue는 싱글페이지어플리케이션! 이기 때문에 원하는 url을 직접 접근을 하고자하면 에러가 발생하게 되는데요. 

즉 모든 주소가 index.html로 향하게 되는것이죠!

 

그러니까 실질적으로 서버에는 해당 페이지의 url이 할당되지 않게되는거고, 우리가 바라는 것은 해당 url로 이동이라기 보다는 해당 라우터로 이동을 하고 싶은거잖아요!

 

그래서 해결방법은 spring boot의 내장 인터페이스인 ErrorController를 상속해 에러발생하게되면 index.html로 이동시켜줄 controller를 만들어 주는 것! 

 

 

@Controller
public class RootController implements ErrorController {
    // url 직접 접근할 경우 대체 경로 추가
    private final String ERROR_PATH = "/error";

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

    public String getErrorPath(){
        return null;
    }
}

 

 

RootControler를 생성하여 ErrorController를 상속 받게해줍니다.

 

 

그러면 이제 원하는 url로 직접 접근이 가능하게 됩니다!