배포 환경에서의 CORS 해결

allow-origins: ${ALLOWED_ORIGIN} # <- http://localhost:3000

@Bean
CorsConfigurationSource corsConfigurationSource() {
    configuration.setAllowedOrigins(corsOrigins); // 위의 allow-origins에서 설정한 허용할 도메인들
    configuration.setAllowedMethods(List.of("GET", "POST", "PUT", "PATCH", "DELETE"));
    configuration.setAllowedHeaders(List.of("*"));
    configuration.setMaxAge(3600L); // Cache preflight
    configuration.setAllowCredentials(true);

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

import axios from "axios";

// 백엔드 서버 base 주소, 필요없으면 아래에서 생략 가능
// 리액트의 환경 변수명에는 'REACT_'라는 접두사가 무조건 붙어야 함
const BASE_URL = process.env.REACT_APP_API;

const axiosInstance = axios.create({
  baseURL: BASE_URL,
  withCredentials: true
});

axiosInstance.defaults.headers.common["Content-Type"] = "application/json";
axiosInstance.defaults.headers.common["Access-Control-Allow-Origin"] = process.env.REACT_API_DOMAIN; // 백엔드 서버 도메인
axiosInstance.defaults.headers.common["Accept"] = "application/json";

export default axiosInstance;