[CS] CORS(Cross-Origin Resource Sharing)란 무엇일까?

🤔 CORS(Cross-Origin Resource Sharing)란 무엇일까?

개발하다보면 한번쯤은 꼭 겪게되는 CORS 에러,,,, 너 누군데

 

💡 CORS는 함축 단어로써 이를 풀면 Cross-Origin Resource Sharing이라는 단어로 이루어져 있다. 이 문장을 직역하면 “교차 출처 리소스 공유 정책” 이라고 해석할 수 있는데, 여기서 교차 출처라고 하는 것은 다른 출처를 의미하는 것으로 보면 된다.

 

⁉️ 출처(Origin)가 뭔데??

우리는 어떤 사이트를 접속할 때 인터넷 주소창에 URL이라는 문자열을 통해 접근하게 된다.

이처럼 URL은 https://domain.com:3000/user?query=name&page=1 과 같이 하나의 문자열 같지만, 사실은 다음과 같이 여러 개의 구성 요소로 이루어져 있다.

‼ CORS를 이해하는데 있어서는 딱 3가지만 기억하면 된다 !!

Origin: Protocol + Host + Port

즉, 출처라는 것은 Protocol과 Host 그리고 Port까지 모두 합친 URL을 의미한다고 보면 된다.

 

✅ 동일 출처 정책(Same-Origin Policy) 이란?

💡 동일 출처 정책은 단어 그대로 동일한 출처에 대한 정책을 말한다. 그리고 이 SOP 정책은 “동일한 출처에서만 리소스를 공유할 수 있다” 라는 법률을 가지고 있다. 즉, 동일 출처 서버에 있는 리소스는 자유롭게 가져올 수 있지만, 다른 출처 서버에 있는 이미지나 유튜브 영상 같은 리소스는 상호작용이 불가능하다는 얘기이다. 동일 출처가 아닌 경우 접근을 차단하는 이유는, 해커가 CSRF나 XSS등의 방법을 이용해서 우리가 만든 어플리케이션에서 개인 정보를 가로채갈 수 있다.

 

🔥 따라서 CORS가 필요한 이유는?

🔥 아무리 보안이 중요하지만, 개발을 하다보면 기능상 어쩔 수 없이 다른 출처 간의 상호작용을 해야하는 케이스가 생기며, 실무적으로 다른 회사의 서버 API를 이용해야 하는 상황도 존재한다. 따라서 이와 같은 예외 사항을 두기 위해 CORS 정책을 허용하는 리소스에 한해 다른 출처라도 받아들인다는 것이다. 요약하자면, SOP 정책을 위반해도 CORS 정책에 따르면 다른 출처의 리소스라도 허용한다는 뜻이다. 그럼 어떻게 CORS 정책을 따르고 SOP 정책을 회피할 수 있을까?

 

🔍 브라우저의 CORS 기본 동작 살펴보기

1. 클라이언트에서 HTTP 요청의 헤더에 Origin을 담아서 전달

• 기본적으로 웹은 HTTP 프로토콜을 이용하여 서버에 요청을 보내게 되는데, 이때 브라우저는 요청 헤더에 Origin이라는 필드에 출처를 함께 담아 보내게 된다.

2. 서버는 응답헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달한다.

• 이후 서버가 이 요청에 대한 응답을 할 때 헤더에 Access-Control-Allow-Origin이라는 필드를 추가하고 값으로 “이 리소스를 접근하는 것이 허용된 출처 URL” 을 내려보낸다.

3. 클라이언트에서 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교한다.

1. 이후 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답이 Access-Control-Allow-Origin을 비교해본 후 차단할지 말지를 결정한다.
2. 만약 유효하지 않다면 그 응답을 사용하지 않고 버린다.
3. 위의 경우에는 둘다 http://localhost:3000이기 때문에 유효하니 다른 출처의 리소스를 문제없이 가져오게 된다.

 

👍 CORS 에러 해결 방법

결국 CORS 에러를 해결하기 위해서는 서버의 허용이 필요하다.

 

 

1️⃣ 서버에서 access-control-allow-origin 설정해주기

1. @Configuration 설정 방법

• 해당 방식은 Configuration 어노테이션을 통해 전역으로 처리하는 방법이다.

// 전역으로 CORS 설정을 할 수 있는 방법
@Configuration
public class CorsFilter implements WebMvcConfigurer {
	@Override
    public void addCorsMappings(CorsRegistry registry){
    registry.addMapping("/api") // 적용할 path 패턴
    		.allowedOrigins("http://localhost:8081") // 허가할 출처들을 기입
            .allowedMethods(	// 허가할 Method 기입
            	HrtpMethod.GET.name,
                HttpMethod.POST.name,
                HttpMethod.PUT.name,
                HttpMethod.DELETE.name
             );
  }

2. @CrossOrigin 설정 방법

• 해당 방식은 모든 도메인이 아닌, 특정 도메인에서만 허용할 때 사용하는 방식이다.
• CORS 설정을 적용시킬 Class 또는 Method 위에 @CrossOrigin의 어노테이션을 붙이면 된다.

@RestController
@RequiredArgsConstructor
@RequestMapping("/api")
@CrossOrigin(origins = {"http://localhost:8080", "http://localhost:9090"}, allowCredentials = "true")
public class MemberController {

  @GetMapping("/hello")
  public String Hello() {
      return "hello";
  }
}

 

2️⃣ 프론트 프록시 서버 설정을 변경해주기

• Front Server에서 특정 Query String으로 요청을 보내면 포트를 살짝 바꿔서 보내는 방식이다.
• 하지만 이는 임시 방편일 뿐 근본적인 해결책은 아니다.

// vite.config.json
export default defineConfig({
  plugins: [react(), svgr()],
  server: {
    proxy: {
      // 경로가 "/api" 로 시작하는 요청을 대상으로 proxy 설정
      '/api': {
        // 요청 서버 주소 설정
        target: 'http://www.google.com',
        // 요청 헤더 host 필드 값을 서버의 호스트 이름으로 변경
        changeOrigin: true,
        // 요청 경로에서 '/api' 제거
        rewrite: (path) => path.replace(/^\/api/, ''),
        // SSL 인증서 검증 무시
        secure: false,
        // WebSocket 프로토콜 사용
        ws: true,
      },
    },
  },
});