Access-Control-Allow-Origin 여러개 설정하는 방법
들어가며
웹 개발자로서 CORS(Cross-Origin Resource Sharing) 문제에 직면했을 확률은 매우 높습니다. 이 문제는 보안을 위해 브라우저에 존재하지만, 매번 우리를 골치 아프게 만드는 문제입니다. 특히 API를 여러 도메인에서 사용할 경우, Access-Control-Allow-Origin을 하나 이상의 값으로 설정해야 할 때가 있습니다. 본 글에서는 이 문제를 해결하는 몇 가지 방법을 다룰 것입니다.
CORS(Cross-Origin Resource Sharing) 개요
CORS는 추가 HTTP 헤더를 사용하여, 웹 페이지가 다른 도메인에서 리소스에 접근할 수 있도록 하는 메커니즘이다. 기본적으로 웹 보안 정책인 Same-Origin Policy 때문에 이러한 기능이 필요하게 됩니다.
Access-Control-Allow-Origin이 뭔가요?
Access-Control-Allow-Origin은 HTTP 응답 헤더 중 하나입니다. 이 헤더는 어떤 도메인이 이 리소스에 접근할 수 있는지를 정의합니다. 예를 들어, Access-Control-Allow-Origin: *는 모든 도메인을 허용한다는 의미입니다.
여러 도메인을 허용하는 방법
서버 설정
Web 서버의 설정 파일에서 CORS 헤더를 직접 지정할 수 있습니다. Apache나 Nginx 같은 웹 서버에서도 가능합니다.
Apache
<IfModule mod_headers.c>
SetEnvIf Origin "http(s)?://(www\.)?(domain1.com|domain2.com)$" AccessControlAllowOrigin=$0
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
</IfModule>
Nginx
if ($http_origin ~* (https?://.*?domain1.com|https?://.*?domain2.com)) {
set $cors "true";
}
if ($cors = "true") {
add_header 'Access-Control-Allow-Origin' "$http_origin";
}
프로그래밍 언어별 코드 예시
Node.js (Express)
app.use((req, res, next) => {
const allowedOrigins = ['http://domain1.com', 'http://domain2.com'];
const origin = req.headers.origin;
if (allowedOrigins.includes(origin)) {
res.setHeader('Access-Control-Allow-Origin', origin);
}
next();
});
Python (Flask)
from flask import Flask, request
app = Flask(__name__)
@app.route('/')
def hello_world():
origin = request.headers.get('Origin')
allowed_origins = ['http://domain1.com', 'http://domain2.com']
if origin in allowed_origins:
response = make_response("Hello, CORS!")
response.headers['Access-Control-Allow-Origin'] = origin
return response
마치며
본 글을 통해 Access-Control-Allow-Origin 헤더를 여러 도메인에 대해 설정하는 방법을 알아보았습니다. 이러한 설정은 웹 애플리케이션의 보안과 편의성을 높이는 중요한 단계입니다. 이 글이 여러분에게 도움이 되기를 바랍니다.
함께 읽으면 좋은 글
Access-Control-Allow-Origin 헤더 추가 방법
들어가며 API와 웹 서비스를 제공하거나 소비하는 과정에서 ‘CORS(Cross-Origin Resource Sharing)’ 문제에 부딪혔을 가능성이 높습니다. 이 문제를 해결하는 핵심은 바로 “Access-Control-Allow-Origin” 헤더입니다. 이 글에서는 이 헤더를 어떻게 추가하고 활용하는지에 대한 전반적인 가이드를 제공하겠습니다. CORS란 무엇인가? CORS(Cross-Origin Resource Sharing)는 웹 페이지의 출처가 다른 곳에 있는 리소스에 접근할 수
http, https, hsts의 차이와 이해: HTTP vs HSTS vs HTTPS
들어가며 웹 세상은 매일 수많은 데이터 패킷이 오가는 복잡한 생태계입니다. 이 글에서는 HTTP, HTTPS, 그리고 HSTS에 대한 깊은 이해를 목표로 합니다. 개발자라면 이러한 기초적인 웹 통신 규약에 대해 확실히 알고 있어야 웹 애플리케이션의 보안과 성능을 최적화할 수 있습니다. HTTP(HyperText Transfer Protocol): 웹의 기초 HTTP란? HTTP는 HyperText Transfer Protocol의 약자로,
