Swagger JWT 토큰 관련 문제

1. 오류 현상

---

: Swagger UI에서 GET /api/members/me 호출 시 Failed to fetch 메시지 발생, Network 상태 코드 0 확인

• 같은 요청을 Postman·curl로 호출 시 200 또는 401 응답 정상 수신

2. 원인 분석

---

: CORS 미설정 + 401 응답에 CORS 헤더 부재 → 브라우저가 응답 차단

• Bearer 토큰 누락 → Spring Security 401 반환
• 401 응답에 Access-Control-Allow-Origin 헤더 없음 → CORS 검증 실패

3. 해결 과정

---

: JWT 적용 & 전역 CORS 허용 후 재검증

• Step 1 JWT 발급 → Swagger Authorize 입력
  • 200/401 실제 응답 확인
• Step 2 CORS 설정
  • WebMvcConfigurer#addCorsMappings()
  • SecurityFilterChain 안 http.cors() 활성화
• Step 3 재검증
  • DevTools 200 OK·OPTIONS 204 확인

4. 적용 코드

---

: 설정 파일 스니펫

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry reg) {
        reg.addMapping("/**")
           .allowedOrigins("http://localhost:8080")
           .allowedMethods("GET","POST","PUT","DELETE","PATCH","OPTIONS")
           .allowCredentials(true);
    }
}

@Bean
SecurityFilterChain filter(HttpSecurity http) throws Exception {
    http.cors(Customizer.withDefaults())
        .csrf(AbstractHttpConfigurer::disable)
        .authorizeHttpRequests(auth -> auth
            .requestMatchers("/v3/api-docs/**","/swagger-ui/**").permitAll()
            .anyRequest().authenticated());
    return http.build();
}

5. 검증 결과

---

: Swagger UI에서 200 OK 및 사용자 JSON 정상 표시, DevTools 콘솔 오류 제거 확인

6. 교훈

---

: 'Failed to fetch' = CORS 차단 + 에러 응답 가리개

• DevTools Network 상태 코드 0 → CORS·스킴 의심
• curl/Postman으로 실제 응답 코드 파악
• 에러 응답에도 CORS 헤더 포함 필요
• Swagger 사용 시 Bearer 토큰 입력 필수

참고 링크: dev-meung.tistory.com