CORS
AXIOS
PATHVAR

@Configuration
public class WebConfig implements WebMvcConfigurer {

@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 모든 URL에 적용
.allowedOrigins("http://localhost:3000") // React 허용
.allowedMethods("GET","POST","PUT","DELETE")
.allowedHeaders("*") // 모든 헤더 허용
.allowCredentials(true); // 쿠키·인증 헤더 포함 허용
}
}

// Spring Security 사용 시 WebConfig의 CORS 설정이 무시될 수 있음
// → SecurityConfig에서 별도로 설정해야 함
@Bean
public CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration config = new CorsConfiguration();
config.setAllowedOrigins(List.of("http://localhost:3000"));
config.setAllowedMethods(List.of("GET","POST","PUT","DELETE"));
config.setAllowedHeaders(List.of("*"));
config.setAllowCredentials(true);
UrlBasedCorsConfigurationSource source =
new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return source;
}

// 성공 — 데이터 포함
return ResponseEntity.ok(boardList);
// → HTTP 200 + JSON 바디

// 생성 성공 — 201
return ResponseEntity.status(HttpStatus.CREATED).body("등록됐어요");
// → HTTP 201 + 문자열 바디

// 실패 — 에러 메시지
return ResponseEntity.badRequest().body("이미 존재하는 아이디입니다.");
// → HTTP 400 + 에러 메시지

// 실전 패턴 — try/catch와 함께
@PostMapping("/api/user/register")
public ResponseEntity<String> register(@RequestBody UserDto dto) {
try {
userService.register(dto);
return ResponseEntity.ok("회원가입 성공");
} catch (IllegalArgumentException e) {
return ResponseEntity.badRequest().body(e.getMessage());
}
}

import axios from 'axios';

// axios 인스턴스 생성 (baseURL 공통 설정)
const api = axios.create({
baseURL: 'http://localhost:8080', // Spring Boot 주소
});

// ── 요청 interceptor ──────────────────────
api.interceptors.request.use((config) => {
const token = localStorage.getItem('token'); // 토큰 꺼내기
if (token) {
config.headers.Authorization = `Bearer ${token}`;
// 모든 요청 헤더에 토큰 자동 첨부!
}
return config;
});

// ── 응답 interceptor ──────────────────────
api.interceptors.response.use(
(response) => response, // 성공(2xx)이면 그대로 반환
(error) => {
if (error.response?.status === 401) {
// 401 Unauthorized → 토큰 만료 또는 없음
localStorage.removeItem('token');
window.location.href = '/login'; // 로그인 페이지로
}
return Promise.reject(error);
}
);

export default api;

// 사용 시: 토큰 신경 쓸 필요 없음
api.get('/api/board/list'); // 헤더에 토큰 자동 첨부
api.post('/api/board/write', data); // 여기도 자동

// Spring Boot — BoardController
@GetMapping("/api/board/detail/{id}") // PathVariable
public ResponseEntity<?> detail(@PathVariable Long id) {
return ResponseEntity.ok(boardService.getDetail(id));
}

@GetMapping("/api/board/list") // RequestParam
public ResponseEntity<?> list(
@RequestParam(defaultValue = "0") int page) {
return ResponseEntity.ok(boardService.getList(page));
}

// React — 호출 방법
api.get(`/api/board/detail/${id}`); // PathVariable
api.get('/api/board/list', {params:{page:currentPage}}); // RequestParam
api.get(`/api/board/list?page=${currentPage}`); // 직접 쿼리스트링도 됨

// 1. React 컴포넌트 (async/await — 03a)
const res = await api.get('/api/board/list', {params:{page:0}});

// 2. axios interceptor 실행 (03b)
// → localStorage에서 token 꺼내서 Authorization 헤더에 자동 첨부

// 3. 브라우저 CORS 검사 (03b)
// → Spring Boot가 Access-Control-Allow-Origin 헤더 응답에 포함
// → 브라우저 통과

// 4. Spring Boot Controller 수신 (02a)
// @GetMapping("/api/board/list")
// @RequestParam int page → 0

// 5. Service → Repository → DB (02b)
// boardRepository.findAll(pageable)

// 6. ResponseEntity.ok(boardList) 반환 (03b)
// → HTTP 200 + JSON 바디

// 7. React useState 업데이트 (03a)
setBoards(res.data); // 화면 자동 렌더링