토요일도 이어서 팀플을 진행했다. 프론트와의 협업도 점점 익숙해지는 것 같다:D
1. CORS 부분 추가 정리
금요일에 프론트와 내가 배포한 서버를 연결할 때 CORS 에러가 나서 Controller 부분에 @CrossOrigin 어노테이션으로 에러 해결을 했었다. 근데 오늘은 또 로그인하고 JWT 토큰이 프론트에 전달이 안 되는 것이다. 그래서 결국 어제 TIL에 적었던 CORS 부분을 따로 빼서 업로드 했다.
>> 게시글:
트러블 슈팅:
로그인 api에서 서버쪽에서 postman으로 테스트 했을 땐 토큰을 헤더에 잘 넣었는데 프론트쪽에서 console.log(response.headers)로 출력해보면 내가 보낸 토큰이 없었다. 하지만 네트워크쪽에 응답헤더에 보면 "Authorization"으로 토큰이 잘 들어가 있는 걸 확인했다.
다시 정리하면,
- 프론트쪽에서 console.log(response.headers) 출력하면 토큰이 없음
- 프론트쪽에서 network 들어가서 확인하면 응답 헤더에 Authorization 값으로 JWT 토큰이 들어와 있음
- 백엔드쪽에서 postman으로 로그인 기능 실행했을 때 헤더에 Authorization 값으로 JWT 토큰이 들어가 있었음
원인:
찾아보니 CORS의 경우 기본적으로 프론트쪽에서 response header 값을 읽지 못한다고 한다. 자바스크립트 코드에서 읽을 수 없고 개발자도구 네트워크 창에서만 확인할 수 있다.
해결방법:
기존 CORS 설정을 Configuration, Bean을 등록하는 방법으로 바꾸고 거기 origin에 관련된 설정 넣을 때 프론트쪽에서 response header를 확인할 수 있게 하는 설정을 추가해줬다.
@Configuration
public class CorsConfig {
@Bean
public CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.setAllowedOrigins(List.of("http://localhost:3000"));
config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"));
config.setAllowedHeaders(List.of("*"));
config.setExposedHeaders(List.of("*")); //여기 이 줄!! 추가하면 됩니다~!!
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return source;
}
}위의 코드와 같이 CorsConfiguration 정하는 부분에
config.setExposedHeaders(List.of("*"));이 코드를 추가해주면 된다. 원래는 JWT토큰을 "Authorization" 헤더로 보내기 때문에 "config.setExposedHeaders("Authorization"); 만 하면 되지만,, 나중에 또 어떤 헤더값을 추가하게 될지 모르기 때문에 그냥 한번에 다 허가해줬다.
그러면 프론트엔트쪽에서는
console.log(response.headers.get("Authorization")이렇게 토큰값 전체를 받아올 수 있다.
2. 백준 알고리즘 문제 트러블 슈팅(?)
트러블 슈팅:
분명 코드가 맞는데 인터넷 답안코드랑도 확인해 봤고 같이 알고리즘 스터디하는 분이랑도 코드가 똑같은데 이게 틀릴 수가 없는데.. 백준에 제출만 하면 바로 "틀렸습니다"가 나오는 것이다.
원인:
print() 메서드를 안 지웠다.. :) 디버깅 하면서 프린트를 했었는데 제출 전에 지우려다가 깜빡하고 그냥 바로 제출한 것이다.
나는 바보야... 이걸로 1시간은 헤맨거 같다...
해결방법:
백준 제출할 때는 불필요한 print() 메서드는 꼭!꼭!꼭! 다 지우고 제출하자..! :D
-끄읕-
