[AWS] CORS(Cross-Origin Resource Sharing) 이해와 설정 가이드

1. CORS 개요

CORS란?

CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 다른 출처(origin)의 리소스에 접근할 수 있도록 하는 보안 메커니즘입니다.  

여기서 "출처"란 프로토콜(http/https), 도메인, 포트의 조합을 의미합니다.

 

왜 필요한가?

- Same-Origin Policy(동일 출처 정책): 브라우저는 보안상의 이유로 다른 출처의 리소스 접근을 제한합니다.

- 현대 웹에서는 프론트엔드와 백엔드가 서로 다른 도메인에 호스팅되는 경우가 많아 CORS 설정이 필수적입니다.

---

 

2. CORS 동작 원리

Preflight 요청

브라우저는 실제 요청 전에 OPTIONS 메서드를 사용해 서버에 예비 요청(preflight)을 보냅니다.

 

http
OPTIONS /api/data HTTP/1.1
Host: api.example.com
Origin: https://frontend.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

서버 응답

서버는 허용된 출처, 메서드, 헤더 등을 응답합니다.

 

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://frontend.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400

 

3. CORS 설정 방법

Express.js 서버 설정

 

const express = require('express');
const cors = require('cors');
const app = express();
// 모든 출처 허용 (개발 환경)
app.use(cors());
// 특정 출처만 허용 (프로덕션 환경)
app.use(cors({
  origin: 'https://frontend.example.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

 

Spring Boot 서버 설정

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("https://frontend.example.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("Content-Type", "Authorization")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

AWS S3 버킷 CORS 설정

{
    "CORSRules": [
        {
            "AllowedOrigins": ["https://frontend.example.com"],
            "AllowedMethods": ["GET", "PUT", "POST", "DELETE"],
            "AllowedHeaders": ["*"],
            "MaxAgeSeconds": 3600
        }
    ]
}

 

4. CORS 문제 해결하기

 

일반적인 CORS 에러와 해결 방법

 

1. “No ‘Access-Control-Allow-Origin’ header is present”

 

• 원인: 서버에서 CORS 헤더를 설정하지 않음

• 해결: 서버에 적절한 CORS 헤더 추가

 

2. “Method not allowed”

 

• 원인: 요청한 HTTP 메서드가 허용되지 않음

• 해결: Access-Control-Allow-Methods에 필요한 메서드 추가

 

3. “Headers not allowed”

 

• 원인: 요청한 헤더가 허용되지 않음

• 해결: Access-Control-Allow-Headers에 필요한 헤더 추가

 

5. 실제 구현 예제

React에서 API 호출

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data', {
      method: 'GET',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json'
      }
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

 

Django에서 CORS 설정

# settings.py
INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]


MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

CORS_ALLOWED_ORIGINS = [
    "https://frontend.example.com",
]

 

마치며

CORS는 웹 개발에서 필수적인 요소입니다. 이 포스팅을 통해 CORS 설정과 문제 해결에 도움이 되셨길 바랍니다.

감사합니다.