springSecurit jwt에 대해서 질문드립니다.
343
51 asked
강좌 완강하고 난뒤에 리액트랑 연계프로젝트 만들면서 jwt작업하다가 궁금한게 있어서 질문드립니다.
1.리액트(localhost:3000) ,스프링부트 (localhost:8080) 의 Cors 설정입니다
@Configuration
@EnableWebMvc
public class WebConfig {
private static final Long MAX_AGE = 3600L;
private static final int CORS_FILTER_ORDER = -102;
@Bean
public FilterRegistrationBean corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("http://localhost:3000");
config.setAllowedHeaders(Arrays.asList(
HttpHeaders.AUTHORIZATION,
HttpHeaders.CONTENT_TYPE,
HttpHeaders.ACCEPT));
config.setAllowedMethods(Arrays.asList(
HttpMethod.GET.name(),
HttpMethod.POST.name(),
HttpMethod.PUT.name(),
HttpMethod.DELETE.name()));
config.setMaxAge(MAX_AGE);
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
bean.setOrder(CORS_FILTER_ORDER);
return bean;
}
}Security 설정일부입니다
@Bean
SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
return http
.authorizeRequests(requests -> requests
.requestMatchers("/login", "/signup", "/user").permitAll()
.requestMatchers("http://localhost:8080/main")
.hasAnyAuthority("ROLE_USER")
)
.formLogin(login -> login
.loginPage("/login")
.usernameParameter("username")
.loginProcessingUrl("/loginProcess")
.successHandler((req, res, auth) -> {
//여기선 토큰이 잘 나옵니다 데이터
String token = JwtUtil.generateToken(auth.getName());
res.addHeader("Authorization", "Bearer " + token);
})
)
.logout(logout -> logout
.logoutSuccessUrl("/login")
.invalidateHttpSession(true)
)
.csrf(csrf -> csrf.disable())
.build();
}
프론트쪽 react 입니다.
axios
.post(`${SERVER_URL}/loginProcess`, null, { params: loginData })
.then((response) => {
//authorization,Authorization 바꿔봐도 둘다 안나옵니다.
const token = response.headers["authorization"];
console.log("토큰:::::::::::::::::::::::::::::" + token); <==undefined가 나와요
localStorage.setItem("token", token);
})
.catch((error) => console.log("Error:", error));문제점 :
서버에서 로그인은 정상적으로 되고 token생성까진 되는데
jwt의 토큰을 클라이언트인 리액트 쪽에서 받아오질 못하네요
이거 혹시 어디가 잘못된건지 알수있을까요 ?
Answer 1
0
안녕하세요 blossom_mind 님, 인프런 AI 인턴이에요.
문제를 파악하기 위해선 몇 가지 확인해야 할 부분이 있습니다.
서버에서 반환하는 응답 헤더 확인:
- 서버에서 토큰이 정상적으로 생성되어 응답 헤더에 포함되는지 확인해보세요.
- 응답 헤더의 토큰 이름과 프론트엔드에서 사용하는 이름(예: “Authorization”)이 일치하는지 확인해야 합니다.
- 서버에서 토큰이 정상적으로 생성되어 응답 헤더에 포함되는지 확인해보세요.
CORS 설정 확인:
- 서버의 CORS 설정이 정상적으로 동작하는지 확인해야 합니다. 프론트엔드 리액트 애플리케이션의 요청이 서버로 전달되고 응답을 받을 수 있도록 CorsFilter가 적절하게 동작하는지 확인해보세요.
- 서버의 CORS 설정이 정상적으로 동작하는지 확인해야 합니다. 프론트엔드 리액트 애플리케이션의 요청이 서버로 전달되고 응답을 받을 수 있도록 CorsFilter가 적절하게 동작하는지 확인해보세요.
요청 방식과 경로 확인:
- 프론트엔드에서 로그인 요청을 보내는 경로와 방식이 서버의 SecurityConfig에서 설정한 경로와 방식과 일치하는지 확인해야 합니다.
- 예를 들어, 프론트엔드에서
/loginProcess에 POST 요청을 보내는데, 서버의 SecurityConfig에서도/loginProcess에 POST 방식으로 요청을 받는 것인지 확인이 필요합니다.
- 프론트엔드에서 로그인 요청을 보내는 경로와 방식이 서버의 SecurityConfig에서 설정한 경로와 방식과 일치하는지 확인해야 합니다.
만약 위의 사항들을 확인했음에도 문제가 해결되지 않는다면, 더 자세한 원인 파악을 위해 서버 및 클라이언트의 로그와 디버깅 정보 등을 추가로 수집해야 할 수도 있습니다. 이를 통해 문제를 해결할 수 있는 방향을 제시할 수 있을 것입니다. 감사합니다!
자동설정 만들기 1부의 Holoman 관련 문의 드립니다.
0
84
1
라이브러리 개발 예제 강의를 찾습니다 !!!
0
225
2
강의 진행되로 똑같이 했는데 jquery가 실행되지 않았는데
0
310
1
HateOas 가 업데이트가 되어서, "Spring HATEOAS" 코드를 아래처럼 하셔야 될겁니다.
0
364
2
섹션2 자동설정 부분 질문있습니다.
0
249
1
mongo shell 명령어 대체 mongo -> mongosh
0
1012
1
데이터베이스 마이그레이션 강의에서 질문 있습니다
0
707
0
자동 설정 만들기 2부에서 질문 있습니다
0
413
1
의존성 관리 응용 부분에서 질문 있습니다
0
321
0
Intellij 에서 빈 주입할때 계속 빨간줄이 뜨는데 어떻게 고쳐야 할까요
0
1183
1
자동설정으로 다른 프로젝트 빈 사용(번외질문)
0
363
0
CREATE TABLE 예제 따라하다가 'expected "identifier"; SQL statement:' 오류나는 경우
2
2212
2
junit5 관련하여 질문드립니다.
0
307
2
맨 처음 프로젝트 생성 후 Run 시 에러
0
535
2
외부 설정과 관련된 질문입니다.
0
255
1
test와 runner account.setEmail에 동일한 값 입력
0
323
1
컨트롤러 view 호출
0
265
1
JVM 과 arguments 는 뭔가요???
0
1170
1
pom 테그 에러
0
355
1
안녕하십니까 기선님!!!!! webclient와 비동기관련 질문요청드립니다
0
1554
1
webEnvironment 내장 톰캣
0
228
1
application.yml 파일 분리
0
393
1
안녕하세요 기선님 서블릿 어플리케이션 구조에 대해 질문드립니다
0
281
1
안녕하세요 질문이 있습니다. :)
1
203
1

