Jwt/Jwt 프론트엔드+백엔드 통신

Springboot Jwt 프론트와 통신하기!(2) with Refused to get unsafe header and CorsFilter

디비드킴 2021. 7. 19. 19:43

이제 진짜 마지막 해결

프런트-> 서버-> 프런트

서버-> 프런트만 하면 된다!

 

에러 내용

Refused to get unsafe header "Authorization"
xhr.onload @ home.jsp:35
load (async)
doDo @ home.jsp:33
onclick @ home.jsp:14
home.jsp:36 Refused to get unsafe header "refreshToken"
xhr.onload @ home.jsp:36
load (async)
doDo @ home.jsp:33
onclick @ home.jsp:14

하아.. 뭔지 모르겠다

 

열심히 또 몇 시간 구글링을 했다...

https://stackoverflow.com/questions/4369987/jquery-getresponseheader-always-returns-undefined

 

jquery getResponseHeader always returns 'undefined'?

I have a a form that I am submitting via ajax. I am using the jquery form plugin. What I am trying to do is get the 'Location' header which is returned from my server. I can see it in firebug. ...

stackoverflow.com

이 글을 보니까

If it is not in this set, it must be present in the Access-Control-Expose-Headers header returned by the server.

라는 문장이 있었다

서버 애 서 뭘 해줘야 할 거 같은데 

라는 생각이 들어서 다시 corsfilter를 보았다..

그리고 다시 구글링..

https://velog.io/@ojwman/spring-boot-cors-header-preflight

 

SpringBoot에서 CORS할 때 header, preflight 이슈 해결하기

SpringBoot에서 CORS할 때 header 노출시키기

velog.io

WebMvcConfig implements WebMvcConfigurer형식이긴 한데

corsfilter도 있을 거 같은데

생각이 들어서 자동완성을 해봤다

 

3개의 오버 로딩된 함수가 나왔고 

list는 아니고... String 이니까 

스트링 꺼로 잡고!

 

corsConfig

corsConfig.java

추가 헤더 지정(?)

config.addExposedHeader("Authorization");

config.addExposedHeader("refreshToken");

 

테스트

 

하.. 드디어... 통신 성공 ㅠㅠㅠㅠㅠㅠㅠㅠ

진짜 일주일 동안 jwt 혼자 공부하면서 

많을걸 배웠다 

jwt 썼을 때 대략적인 구조

예를 들어 jwt 사용한다면 토큰 인증 방식이 된다

즉 프런트 높은 확률로

서버가 따로 있게 될 수봤게 없다

그렇지 않으면 그냥 시큐리티 세션을 사용하면

되지 않을까.. 생각이 들고

그리고

프런트와 통신 와...

진짜 힘들었다

진짜 물어보고 싶은데 

물어볼 수도 없고 

국비지원 교육은 이제 jdbc에 들어와서

이런 걸 물어보면 너무~~ 주제넘을 거 같다는

생각이 들어서이다

마지막으로 그러면 이제 페이지 이동은...

컨트롤러가 아니라.. 프런트에서 하고

백엔드는 api가 되는 게 맞겠지..?

요청하는 정보만 주면 되는 형식..?

일단 이제 어느 정도 알았으니!

 

다음 토이 프로젝트를 해보자!