개시발 혈압올라서 못해먹겟음


지금 이 좆같은 문제에 12시간 이상 매달린거같은데;;; 챗지피티는 깡통새끼마냥 지능이 낮아서 코딩조차 제대로 못함;; 



ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ


일단 Oauth2 (카카오) 로그인하면 access_token(jwt)가 쿠키에 저장됨.

 

그리고 내 백엔드(localhost:8080)에 GET 요청을 날려서 .anyRequest().authenticated() 자원에 접근함


근데 여기서 문제가 생기는데, 보호된 자원에 접근을 하려고하니까


분명 프론트(localhost:3000)에서는 백엔드로 요청을 날렸거든???!!!!!@@@


근데 시벌 크롬에서 console창을 열어보면 요청을 아래처럼 날렸다고 뜸 (나는 분명 'localhost:8080/어쩌고' 여기로 날렸는데 말이지)

https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=클라이언트_아이디_가렸음&scope=profile_nickname%20account_email&state=긴_영어는_혹시몰라_가림&redirect_uri=http://localhost:8080/oauth2/callback/kakao



그래서 아래처럼 WebConfig도 만들고 

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
@Override
 public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/v1/**")
.allowedOrigins("http://localhost:3000", "http://localhost:8080")
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
.allowedHeaders("*")
.allowCredentials(true)
.maxAge(3600);
}
}


아래처럼 SecurityConfig도 수정해봤는데 자꾸 안 됨

@Bean
 public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http
.cors(cors -> cors.configurationSource(corsConfigurationSource()))
.csrf(csrf -> csrf.disable())
.sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS)) // 세션 설정
 .addFilterBefore(new JwtFilter(), ExceptionTranslationFilter.class)
.authorizeHttpRequests(authorize -> {
authorize
.requestMatchers("/oauth2/**", "/", "/api/v1/auth/**").permitAll() // OAuth2 및 인증 요청 경로 허용
// .anyRequest().permitAll();
 .anyRequest().authenticated(); // 그 외 모든 요청은 인증 필요
 })
.oauth2Login(oauth2 -> oauth2
.authorizationEndpoint(endpoint -> endpoint.baseUri("/api/v1/auth/oauth2")) // OAuth2 인증 엔드포인트
 .redirectionEndpoint(endpoint -> endpoint.baseUri("/oauth2/callback/*")) // 리다이렉션 엔드포인트
 .userInfoEndpoint(endpoint -> endpoint.userService(oAuth2UserService)) // 사용자 정보 처리
 .successHandler(oAuth2SuccessHandler) // OAuth2 성공 처리 핸들러
 );

return http.build();
}

@Bean
 public CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration configuration = new CorsConfiguration();
configuration.setAllowedOrigins(Arrays.asList("http://localhost:3000")); // 허용할 출처
 configuration.setAllowedHeaders(Arrays.asList("Authorization", "Content-Type", "Accept")); // 허용할 헤더 목록
 configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS")); // 허용할 HTTP 메소드
 configuration.setAllowCredentials(true); // 자격 증명 허용

 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.레지스터(검열당해서 한글로 적음)CorsConfiguration("/api/v1/**", configuration);
return source;
}


프론트에서는 아래처럼 'withCredentials: true'로 설정하고 헤더에 token(쿠키에서 뽑아옴) 도 넣어놨는데 자꾸 지랄함

const response = await axios.get(POST_URL, {
 headers: {
 Authorization: `Bearer ${token}`,
},
withCredentials: true,
});
setPosts(response.data);



OAuth2.0 넣은 이후로 보호된 자원에 접근하려면 카카오한테 요청을 넣어야하니까 이런 문제가 발생하는거 같은데,

이거 해결할 줄 아시는분??? 간곡합니다요 ㅠㅠㅠ