프론트와의 협업 경험은 처음이었다.
이전에 한 번 테스트를 해보았을 때 cors 문제가 생기지는 않았어서 이번에도 당연히 되리라 생각했다.
@RestController
@RequestMapping()
@CrossOrigin
public class QuestionController {
---
}예전에 했던 방식과 같이 컨트롤러마다 @CrossOrigin 애너테이션을 설정해 주었고, 그 뒤에 배포를 해서 프론트와 통신이 잘 되기만을 기다리고 있었다.
하지만 배포한 서버와 localhost:3000 즉 프론트 측과 Origin이 달라 실행되지 않는다는 cors policy 문제를 접했고, 이를 해결하기 위해 구글링을 시작했다.
우선 급한대로 프록시 서버를 만들어서 테스트 해달라 부탁했고, 열심히 구글링을 시작했다...
https://letsmakemyselfprogrammer.tistory.com/89
나는 CorsConfigurationSource의 형식으로 cors를 관리하고 있었는데, 위의 블로그에서 내 코드와 다른점을 찾았다.
변경 전, 후 코드인데 setAllowedOrigins 안에 "*"로 설정되어 있던 것을 프론트 쪽의 배포주소를 같이 넣어주었다.
이렇게 하면서 프론트 측과 origin이 다른 것이 해결 되었다.
이 문제를 해결하고 조금 뒤 다른 문제가 생겼다.
개발자모드를 들어가서 네트워크로 들어갔을 시에는 Authorization 즉 토큰의 값이 보이는데, 자바스크립트를 통해서 Authorization 값이 받아와지지 않는다는 것이다.
이 문제를 해결할 때 구글링을 좀 많이 했던 것 같다...
https://kingchan223.tistory.com/230
cors 필터를 만들 때에 Authorization의 경우에는 ExposedHeader로 추가해 주어야 한다는 것이다.
결과적으로 이런 코드가 만들어졌고, 재배포 했더니 cors 그리고 토큰 관련 되어서는 아무 문제가 없어졌다...!
cors 관련해서는 나중에 따로 정리를 이것저것 해봐야할 것 같다.. 너무 어려운 부분이다..
