[Web] CORS 에러 이해하기

웹 개발을 하다보면 한 번쯤은 꼭 만날거라고 생각되는(?) 에러인 CORS에러에 대해 정리해보자.

📌 CORS란?

Cross-Origin Resource Sharing의 약자로, 한 출처(origin)의 웹 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록 하는 메커니즘.

웹 브라우저는 보안 상의 이유로 동일 출처 정책(Same-Origin Policy)을 따르며, 이를 통해 출처가 다른 리소스의 접근을 제한한다. 따라서 이를 위반하는 요청을 하게 되면 CORS에러가 발생하는 것이다.

※ 여기서 말하는 출처란 프로토콜, 도메인, 포트를 포함한 URL을 말함.
ex - http://example.com 과 https://example.com은 다른 출처

📌 CORS 에러가 발생하는 이유

CORS 에러는 클라이언트가 다른 출처의 리소스를 요청할 때 서버가 올바른 CORS 헤더를 포함하지 않은 경우 발생한다. 이는 웹 브라우저가 보안 상의 이유로 요청을 차단하기 때문이다.

주요 CORS 헤더는 다음과 같다.

• Access-Control-Allow-Origin : 어떤 출처가 리소스에 접근할 수 있는지를 명시한다.
• Access-Control-Allow-Methods : 허용되는 HTTP 메서드를 명시한다.
• Access-Control-Allow-Headers : 요청 시 허용되는 헤더를 명시한다.

📌 CORS 에러 해결 방법

1. 서버에서 Access-Control-Allow-Origin 허용하기

CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addAllowedOriginPattern("*");
config.addAllowedHeader("*");
config.addAllowedMethod("*");

서버에서 Access-Control-Allow-Origin 헤더에 허용할 출처를 기재해서 클라이언트에 응답해주면 된다.

위의 소스는 모든 출처를 허용한다고 되어있지만 특정 도메인만 허용하도록 해주는것을 추천한다.

2. 프록시 서버 사용하기

프록시 서버를 사용하여 CORS에러를 안나게 할 수도 있다. 이 방법은 해결이라기보다 우회하는 방법이라고 하는게 적절할 것 같다. 프록시 서버를 통해 클라이언트의 요청을 동일 출처에서 발생한 것처럼 위장하여 서버로 전달할 수 있다.

module.exports = {
  devServer: {
    proxy: {
      "^/api": {
        target: process.env.VUE_APP_API_URL,
        changeOrigin: true,
         pathRewrite: {
          '^/api': ''
        },
      },
    },
}

vue를 이용한 프로젝트에서는 위의 소스처럼 vue.config.js 파일에 해당 설정을 추가할 수 있다.

이 방법은 개발 환경이나 특정한 상황에서 빠르게 문제를 해결하는 데 유용할 수 있지만, 실제 운영 환경에서는 가능한 한 CORS 헤더를 올바르게 설정하는 것이 좋다.

💡 만약, 동일 출처 정책(SOP)이 없다면 XSS(교차 사이트 스크립팅)이나 CSRF(교차 사잉트 요청 위조), 데이터 유출 등의 문제가 발생할 수 있다. 이러한 문제를 방지하기 위해 SOP는 매우 중요하며, CORS를 통해 안전하게 접근할 수 있도록 제어해야 한다.