CORS를 Pages Functions에서 활성화하는 방법?
Benjamin Carter교차 출처 리소스 공유(CORS)는 웹 애플리케이션이 다른 출처의 리소스와 상호작용하는 방식을 제어하기 위해 브라우저에 의해된 보안 메커니즘입니다. 기본적으로 동일 출처 정책은 웹 페이지가 자신의 도메인이 아닌 서버에 요청을 할 수 없도록 제한합니다. CORS는 서버가 HTTP 헤더를 통해 리소스에 접근할 수 있는 출처를 지정함으로써 이러한 제한을 완화합니다p>
주요 CORS 응답 헤더 및
- Access-Control-Allow-Origin: 리소스에 접근할 수 있는 출처를 지정합니다. *를 사용하면 모든 출처가 허용되지만(민감한 데이터에 대해서는 권장되지 않음) 특정 출처(예: https://app.example 지정하면 보안이 강화됩니다.
- -Control-Allow-Methods: 리소스에 접근할 때 허용되는 HTTP 메서드를 나열합니다(예: GET, POST, PUT, PATCH, DELETE,).
- Access-Control-Allow-Headers: 실제 요청에 포함될 수 있는 사용자 정의 헤더를 지정합니다(예: Authorization, Content-Type, X-CSRF-Token).
- Access-Control-Allow-Credentials: 자격 증명(쿠키 또는 HTTP 인증 등)을 허용하는지 여부를 나타냅니다. 반드시 true로 설정해야 하 명시적(exclusive) 출처와 함께 사용할 수 있습니다.
- Access-Control-Max-Age: 브라우저가 프리플라이트 요청의 결과를 캐싱할 수 있는 기간(초)을 정의합니다(예: 24시간 동안 86400).
비슷하지 않은 요청(non-simple request)(사용자 정의 헤더나 GET/POST 이외의 메서드를 사용하는 요청)을 고려할 때, 브라우저는 자동으로 서버에 프리플라이트 OPTIONS 요청을 보냅니다. 서버는 적절한 CORS 헤더를 반환해야 하며, 그렇지 않으면 브라우저는 실제 요청을 차단합니다.
페이지 기능을 통해 교차 출처 문제 해결
페이지 기능은 EdgeOne 엣지 노드에서되는 서버리스 코드 실행 환경을 제공합니다. 개발자는 비즈니스 로직을 작성하고 트리거 규칙을 구성하기만 하면 됩니다. 서버 인프라 관리는 필요하지 않습니다. 코드는 최종 사용자와 가까운 엣지 노드에서 유연하고 안전하게 실행됩니다>
헤더 API를 통한 CORS 해결
전형적인 코드 예:
// functions/api/hello.ts
export async function onRequest({ request }) {
const origin = request.headers.get("Origin");
// 비즈니스 로직 또는 프록시 상류 요청
const response = await fetch(request);
// CORS 응답 헤더 설정
response.headers.set("Access-Control-Allow-Origin", origin || "*");
response.headers.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
response.headers.set("Access-Control-Allow-Headers", "Content-Type, Authorization");
response.headers.set("Access-Control-Max-Age", "86400");
return response;
}참고: 자격 증명(쿠키와 같은)을 지원해야 하는 경우 Access-Control-Allow-Origin을 특정 도메인으로 설정하고 Access-Control-Allow-Credentials:true를 추가해야 합니다.
지 위치 기반 CORS
EdgeOne의 지리 위치 데이터를 사용하여 지역별 CORS 정책을 구현할 수 있습니다:
// functions/api/hello.ts
export async function onRequest({ request }) {
const origin = request.headers.get("Origin");
const country = (request.eo.geo && request.eo.geo.country) || "US";
const corsMap = {
US: { origins: ["https://us.example.com"],: true },
CA: { origins: ["https://ca.example.com"], credentials: true },
EU: { origins: ["https://eu.example.com"], credentials: true },
};
const region = corsMap[country] || { origins: ["https://global.example.com"], credentials: false };
const isAllowed = origin && region.origins.includes(origin);
const headers = {
Access-Control-Allow-Origin": isAllowed ? origin : "null",
"Access-Control-Allow-Methods": "GET, POST, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Authorization",
"Access-Control-Allow-Credentials": region.credentials.toString(),
"Access-Control-Max-Age": "86400",
};
if (request.method === "OPTIONS") {
return new Response(null, { status: 204, headers });
}
return new Response(JSON.stringify({ country }), {
headers: { ...headers, "content-type": "application/json; charset=UTF-8" },
});
}설정을 테스트하세요
# 프리플라이트
curl -i -X OPTIONS https://your-domain.edgeone.app/api/hello \
-H "Origin: https://app.example" \
-H "Access-Control-Request-Method: POST"
# 간단한 요청
curl -i https://your-domain.edgeone.app/api/hello \
-H "Origin: https://app.example"OPTIONS 호출에서 200 상태와 두 응답 모두에서 올바른 CORS 헤더를 확인하세요.
일반적인 CORS 시나리오 및 해결책
- 로런트드 개발에서 API를 호출할 때 CORS 오류: API 서버는 로컬 개발 도메인을 허용하는ORS 헤더를 포함해야 합니다.
- 귀하의 API를 통합하는 서드파티 애플리케이션:
Origin를 동적으로 결정하고 필요 따라 해당 CORS 헤더를 반환하여 보안을 강화합니다. - 자격 증명이 있는 교차 출처 요청 지원:
Access-Control-Allow-Credentials는true로 설정해야 하며Access-Control-Allow-Origin은 *로 설정할 수 없습니다.
요약
CORS는 프런트엔드/백엔드리 및 마이크로서비스 아키텍처에서 피할 수 없는 문제입니다. EdgeOne Pages Functions에서 CORS 응답 헤더를 유연하게 설정함으로써 교차 출처 접근 요구 사항을 효율적이고 안전하게 해결할 수 있습니다. 보다 복잡한 시나리오의 경우, 환경 변수, KV 저장소 및 기타 기능을 활용하여 동적 권한 부여 및 개인화된 교 출처처 전략 전략을 구현할 수 있습니다.
고급 사용법은 Pages Functions 문서를 참조하세요.