[Spring Boot] Vuejs3 + CORS

 

 

이노무 CORS  염병할 것 때문에 계속 삽질을 했네.

 

삽질을 했던 이유는  Axios로 get 이던 post 던 간에 jwt token을 헤더 넣고 호출 했을 때,

 

// 이런 식으로 호출 했음..

const header = {
    Authorization : token
}
const url = `${this.$store.getters.SERVER_URL}/service`

Axios.get(url, { 
  header,
  withCredentials: true 
})
.then( resp => {
    console.log(resp)
})
.catch( err =>{
	console.info(err)
})

 

 

Spring boot의 필터 부분에서 해당 헤더 부분을 읽을 수 없는거였음.  정확히는 헤더 중에 Authorization 이라는 이름 가진 헤더 인데 이게 안들어오는 거였지.

 

웃긴게  SecurityConfig 쪽에서  permitAll 을 한 것들은  들어오는데, 아닌 것들은 안 들어오니까  토큰 인증 처리가 안되면서 진행이 안되는거였지. 

이상한게 POSTMAN 앱에서 하면 또 되. ㅋㅋ  졸라 이상하네.

 

해결법은 존나 간단했음.  아래와 같이 하면됨.   

 

public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception 
{
	http.httpBasic().disable()
    ...
    ...
    .cors() // 이걸 호출 해야함!!! 이거 넣으니까 바로 정보가 들어오더라 
    ...
    ...
    .antMatcher("/open/service").permit
    .anyRequest().authenticated()
    ...

}

 

짜증나지만 해결했으니 해결했으니 된거지.

근데 이게 vuejs 로 해서 이런건지는 모르겠음.  아마도 서버셋팅이 문제 였지 않았을까라고 추측만 됨.  fetch 같은걸로 했을 때도 동일한 증상인거 보면 뭐 저거 문제였겠지.