📒 CORS (cross origin resource sharing)
📌 cross-origin request
클라이언트와 서버간의 url에서 프로토콜/도메인/포트가 다른 상황에서 발생하는 요청을 말한다.
cross-origin 요청 예시
프로토콜 - http와 https는 프로토콜이 다르다.
도메인 - naver.com과 daum.net은 다르다.
포트 번호 - 8080포트와 3000포트는 다르다.
📌 cors
브라우저의 cross-origin 요청을 받은 서버는 http header에 승인/거절의 기준이 되는 값들을 담아 응답한다. 브라우저가 서버가 응답한 header 값을 봤을때 요청이 승인되지 않았다고 판단되면 브라우저는 해당 요청을 차단한다. 이러한 매커니즘을 cors라 한다.
📌 http response header
아래와 같은 값들이 http response header에 담겨 클라이언트에 전달된다. 즉, 아래 값들을 서버에서 설정해주어 cors 문제를 해결해야 한다.
response header에 들어있는 값들
Access-Control-Allow-Origin
Access-Control-Expose-Headers
Access-Control-Max-Age
Access-Control-Allow-Credentials
Access-Control-Allow-Methods
Access-Control-Allow-Headers
아래는 Spring에서 cors 설정을 하는 예시코드이다.
public CorsConfiguration getCorsConfiguration(HttpServletRequest request) {
CorsConfiguration config = new CorsConfiguration();
config.setAllowedOrigins(Collections.singletonList("http://localhost:4200"));
config.setAllowedMethods(Collections.singletonList("*"));
config.setAllowCredentials(true);
config.setAllowedHeaders(Collections.singletonList("*"));
config.setExposedHeaders(Arrays.asList("Authorization"));
config.setMaxAge(3600L);
return config;
}📌 cors가 필요한 이유
브라우저에서 cors가 작동하지 않았다면, 모든 곳에서 서버로 데이터를 요청할 수 있다. 따라서 악의적인 목적으로 프론트단 사이트를 흉내내어 서버와 통신하는 것도 가능하게 된다. 이러한 보안적인 문제를 방지하고자 cors가 필요하다.
