웹 애플리케이션을 개발하다 보면 보안 자원 공유(Cross-Origin Resource Sharing, CORS) 설정이 필요한 경우가 있습니다. CORS는 다른 도메인 간의 자원 공유를 안전하게 허용하기 위한 메커니즘입니다. 이는 브라우저의 보안 정책으로 인해 도메인 간 리소스 공유에 제약이 있는 웹 애플리케이션에서 자주 사용됩니다.

CORS 설정 방법

백엔드 (Python) 측에서 설정

Python으로 개발된 백엔드에서는 CORS 설정을 간단하게 할 수 있습니다. 아래의 예제 코드를 참고해주세요.

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/')
def hello_world():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run()

위의 코드에서는 Flask 프레임워크와 flask_cors 라이브러리를 사용하여 CORS 설정을 할 수 있습니다. CORS(app) 코드는 모든 도메인으로부터의 요청을 허용하는 기본 설정을 적용합니다. 필요한 경우 CORS 함수에 매개변수를 추가하여 세밀한 설정을 할 수 있습니다.

프론트엔드에서 설정

만약 백엔드에서 CORS 설정을 할 수 없거나, 브라우저의 동일 출처 정책(Same-Origin Policy) 제한으로 인해 추가적인 프론트엔드에서의 설정이 필요한 경우, JavaScript를 사용하여 CORS 요청을 보낼 수 있습니다. 아래의 예제 코드를 참고해주세요.

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

위의 코드에서는 fetch 함수를 사용하여 GET 메서드로 다른 도메인의 데이터에 접근할 수 있도록 CORS 설정을 적용하였습니다. Access-Control-Allow-Origin 헤더에 *을 설정함으로써 모든 도메인에서의 요청을 허용합니다.

결론

웹 애플리케이션 개발 시 도메인 간의 자원 공유를 안전하게 하기 위해 CORS 설정을 해야할 때가 있습니다. 백엔드에서는 프레임워크나 라이브러리를 사용하여 간단하게 설정할 수 있고, 필요한 경우 프론트엔드에서 JavaScript를 사용하여 추가적인 설정을 할 수 있습니다. CORS 설정을 통해 웹 애플리케이션의 보안을 강화하고 다른 도메인과의 자원 공유를 원활하게 할 수 있습니다.