[Spring] CORS 요청 오류 Access-Control-Allow-Origin 허용, 설정

---

Spring에서 웹 개발을 하다가 CORS(Cross-Origin Resource Sharing) 정책 때문에 애를 먹었다. Postman에서 요청할 때는 아무런 오류도 없었는데 프론트엔드와 백엔드가 서로 다른 도메인에서 작동할 때 CORS 에러가 발생했다. 이번에 새로 프로젝트를 하면서 CORS를 만났는데 해결하며 CORS해결을 기록한다.

CORS란 무엇인가?

CORS는 웹 브라우저가 다른 도메인에서 리소스를 요청할 때 보안상의 이유로 적용되는 정책이다. 기본적으로 브라우저는 동일 출처 정책(Same-Origin Policy)을 따르기 때문에, 다른 도메인에서 요청을 보내면 보안상의 이유로 차단당한다. 그래서 CORS는 이러한 요청을 허용하기 위한 방법으로 서버가 특정 출처에서 오는 요청을 허용하도록 설정할 수 있는 것이다.

CORS 에러의 원인 >> Access-Control-Allow-Origin

CORS 에러는 주로 클라이언트가 요청을 보낼 때 서버가 해당 요청을 허용하지 않아서 발생한다. 예를 들어, 클라이언트가 https://example.com에서 https://api.example.com으로 요청을 보낼 때, 서버가 Access-Control-Allow-Origin 헤더를 설정하지 않으면 브라우저는 이 요청을 차단하고, 이때 CORS 에러가 발생한다.

Access to XMLHttpRequest at 'http://localhost:8080/c1/chatBot/send' from origin 'http://localhost:65529' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Spring에서 CORS 설정하기

Spring에서 CORS를 설정하는 할 때 @Configuration 어노테이션을 사용하여 설정 하였다.

@Configuration
public class CorsConfig {

	@Bean
	public CorsFilter corsFilter() {
		
		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
		CorsConfiguration config = new CorsConfiguration();
		config.setAllowCredentials(true);
		config.addAllowedOriginPattern("*");
		config.addAllowedHeader("*");
		config.addAllowedMethod("*");
		source.registerCorsConfiguration("/**", config);
		return new CorsFilter(source);
	}
}

코드 설명

• @Configuration : 이 클래스가 Spring의 설정 클래스.
• @Bean : @Bean 어노테이션을 사용하여 CORS 필터를 생성.
• UrlBasedCorsConfigurationSource : URL 경로에 따라 CORS 구성을 선택하는 객체.
• CorsConfiguration : CORS 설정을 정의.
• setAllowCredentials(true): 자격 증명을 포함한 요청을 허용하는 설정.
• addAllowedOriginPattern(“*”): 모든 출처에서의 요청을 허용하는 설정.
• addAllowedHeader(“*”): 모든 헤더를 허용하는 설정.
• addAllowedMethod(“*”): 모든 HTTP 메서드를 허용하는 설정.

CORS 설정 등록

마지막으로, source.registerCorsConfiguration("/**", config); 을 적어 위에서 정의한 CORS 설정을 모든 경로에 대해 등록한다. 이렇게 하면 모든 요청에 대해 CORS 설정이 적용된다.

---

참고

[1] Inpa Dev 👨‍💻 – 악명 높은 CORS 개념 & 해결법 – 정리 끝판왕 (https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F)

[2] 티스토리 – 나를 너무나 힘들게 했던 CORS 에러 해결하기 (https://xiubindev.tistory.com/115)

[3] GitHub – CORS란? CORS를 해결해보자 (https://bohyeon-n.github.io/deploy/web/cors.html)

[4] velog – CORS 가 뭔데 CORS 에러 어떻게 해결하는건데 (https://velog.io/@jh100m1/CORS-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%AD%94%EB%8D%B0-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%95%B4%EA%B2%B0%ED%95%98%EB%8A%94%EA%B1%B4%EB%8D%B0)

---

관련글

• 
  Error: useLocation() may be used only in the context of a component.
• 
  CentOS 8 Librepo 오류 해결: Failed loading plugin “osmplugin”: No module named ‘librepo’
• 
  [Spring] CORS 요청 오류 Access-Control-Allow-Origin 허용, 설정