Spring CORS 설정하기

이번 포스팅에서는 CORS에 대해서 간단한 개념을 짚어보고 Spring을 통해서 CORS 정책 설정 방법을 알아보도록 하겠습니다
자세한 개념은 아래 페이지에 정리가 잘 되어 있으니 프론트/백엔드 상관없이 웹개발자분들은 한번씩 읽어 보시는 것을 추천드립니다 🤗
교차 출처 리소스 공유 (CORS) - HTTP | MDN


CORS란?

먼저, 아래 사진의 에러 내용을 살펴보도록 하겠습니다.

http://localhost:3000' -> ‘http:localhost:8080/todo’를 호출하였더니 위와 같은 메세지가 출력되었습니다. 빨간 네모박스 안에 메세지를 보면, CORS 정책에 의해 접근이 막혔다는 메시지가 나와 있습니다. CORS란 무엇일까요?

 

CORS란 ‘Cross-Origin Resource Sharing’의 약자로 ‘교차 출처 리소스 공유’로 번역됩니다. 웹브라우저 에서 다른 출처의 자원을 공유하는 방법입니다.

 


Origin 이란?

Origin은 출처라는 의미로 번역되는데 일반적으로 '동일/교차' 출처라는 의미로 사용됩니다.
여기서 말하는 Origin은 아래와 같이 표현됩니다
https://yhame.tistory.com

  • 프로토콜 : https
  • 호스트 : yhmane.tistory.com
  • 포트 : 443 (80, 443 포트는 생략이 가능합니다 😀)

즉, 여기서 말하는 Origin은 우리가 흔히 얘기하는 URL 구조에서 '프토토콜 + 호스트 + 포트'를 합친것과 같습니다

Same Origin / Cross Origin

위에서 알아본 동일/교차 출처에 대해서 url과 비교하여 동일출처인지 다른출처인지 비교해보도록 하겠습니다. 기준 url은 아래와 같습니다

# 기준 url
https://yhmane.tistory.com
URL 출처 내용
https://yhmane.tistory.com/category 동일출처  protocol, host, port 동일
https://yhmane.tistory.com/198?category=769262 동일출처 protocol, host, port 동일
http://yhmane.tistory.com/category 다른출처 protocal이 다름
https://yhmane.tistory.com:8081/category 다른출처 port가 다름
https://github.com/yhmane 다른출처 host가 다름

※ 동일출처의 경우 SOP (Same-Origin Policy)라 웹브라우저 상에서 보안상 이슈가 없지만, 교차출처의 경우 보안상 이슈로 인해 웹브라우저상에서 에러메시지가 처리됩니다. 결국, 이러한 문제를 해결하기 위해서는 서버(Spring, Node 등등)에서 CORS를 처리해주어야 합니다.


Spring CORS 설정하기

Spring에서는 크게 2가지 방식으로 CORS를 설정할 수 있습니다.

  1. @Configuration 설정 방법
  2. @CrossOrigin 설정 방법

일반적으로는 1번 @Configuration 설정 방법을 많이 사용합니다

@Configuration 이용 방법

먼저, @Configuration을 이용하여 전역으로 처리하는 방법을 알아보겠습니다.

* Java

@Configuration
public class CorsConfig implements WebMvcConfigurer {

	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**")
			.allowedOrigins("http://127.0.0.1:8080")
			.allowedMethods(
				HttpMethod.GET.name,
				HttpMethod.POST.name,
				HttpMethod.PUT.name,
				HttpMethod.DELETE.name
			)
	}
}

* Kotlin

@Configuration
class CorsConfig : WebMvcConfigurer {

	override
	fun addCorsMappings(registry: CorsRegistry) {
		registry.addMapping("/**")
			.allowedOrigins("http://localhost:3000")
			.allowedMethods(
				HttpMethod.GET.name,
				HttpMethod.POST.name,
				HttpMethod.PUT.name,
				HttpMethod.DELETE.name
			) 
	} 
}
  • addMapping
    CORS 적용할 Url 패턴을 정의합니다. 모든 url에 대한 접근을 허용할 경우 위와 같이 ‘/**’로 설정합니다.
  • allowedOrigins
    위에서 Origin은 (Protocol + host + port)의 조합이라고 들었습니다. 따라서, 허용하고자 하는 Origin을 적어주시면 됩니다. 마찬가지로 chaining도 가능합니다
  • allowedMethods
    허용하고자 하는 method를 적어주시면 됩니다.

@CrossOrigin 이용 방법

어노테이션 이용방법은 조금 더 간단합니다.
해당 클래스나 메서드위에 @CrossOrigin 어노테이션을 붙여주면 됩니다.

* Java

@CrossOrigin("http://localhost:3000")
@RestController
@RequestMapping("/todo")
public class TestController {
	
	//@CrossOrigin("http://localhost:3000")
	@GetMapping public String test() {
		// test ..
	}
}

* Kotlin

@CrossOrigin("http://localhost:3000")
@RestController
@RequestMapping("/todo")
class TestController {

	//@CrossOrigin("http://localhost:3000")
	@GetMapping fun test() {
		// test ..
	}
}

정리

  • 웹브라우저를 통해 동일출처가 아닌 교차출처를 이용해야 할 경우 CORS 설정을 해야 합니다
  • Origin은 (프로토콜 + 도메인 + 포트)로 구성됩니다
  • Spring에서 CORS 설정은 전역, @CrossOrigin을 이용해서 설정합니다
  • 이외에도 필터를 이용해 CORS 설정을 해줄수도 있습니다

출처

교차 출처 리소스 공유 (CORS) - HTTP | MDN
Cross Origin Resource Sharing - CORS - 뒤태지존의 끄적거림
baeldung

블로그 이미지

yhmane

댓글을 달아 주세요