IT/클라우드

CORS(교차 출처 리소스 공유)란 무엇인가?

미니스탑 2024. 11. 25. 14:22

 

웹 개발에서 CORS는 매우 중요한 개념입니다. CORS는 Cross-Origin Resource Sharing의 약자로, 서로 다른 출처 간에 리소스를 안전하게 공유할 수 있도록 하는 메커니즘입니다. 기본적으로 웹 브라우저는 보안상의 이유로 다른 출처의 리소스에 대한 요청을 제한합니다. 이 제한을 우회하기 위해 CORS가 필요합니다.

CORS 필요성

 

 웹 애플리케이션은 종종 다른 도메인에서 데이터를 요청해야 합니다. 예를 들어, 프론트엔드 애플리케이션이 API 서버에 요청을 보내는 경우가 많습니다. 이때, 브라우저는 기본적으로 동일 출처 정책(Same-Origin Policy)을 적용하여 다른 출처의 리소스에 대한 접근을 차단합니다. CORS는 이러한 제한을 완화하여 안전하게 리소스를 공유할 수 있도록 합니다.

CORS 작동 방식

CORS는 HTTP 헤더를 사용하여 작동합니다. 서버는 특정 출처에서의 요청을 허용하기 위해 Access-Control-Allow-Origin 헤더를 설정합니다. 이 헤더는 요청을 보낸 출처를 명시하거나, 모든 출처를 허용하기 위해 *를 사용할 수 있습니다.

예시

서버에서 다음과 같은 헤더를 설정했다고 가정해봅시다:

Access-Control-Allow-Origin: https://example.com


이 경우, https://example.com에서 오는 요청만 허용됩니다.

만약 모든 출처를 허용하고 싶다면 다음과 같이 설정할 수 있습니다:

Access-Control-Allow-Origin: *

 

프리플라이트 요청 예시

프리플라이트 요청은 주로 PUT, DELETE와 같은 메서드를 사용할 때 발생합니다.
예를 들어, 클라이언트가 다음과 같은 요청을 보낸다고 가정해봅시다:
OPTIONS /api/data HTTP/1.1
Host: api.example.com
Origin: https://mywebsite.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header

 

이 요청은 서버에 PUT 메서드와 X-Custom-Header를 사용할 수 있는지 확인하는 것입니다. 서버는 다음과 같은 응답을 보낼 수 있습니다:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://mywebsite.com
Access-Control-Allow-Methods: PUT, GET, OPTIONS
Access-Control-Allow-Headers: X-Custom-Header

 

 

이 응답은 mywebsite.com에서 오는 PUT 요청을 허용하며, X-Custom-Header를 사용할 수 있음을 나타냅니다.

 

CORS의 종류

CORS 요청은 크게 두 가지로 나눌 수 있습니다:
1. 단순 요청(Simple Requests): GET, POST, HEAD 메서드를 사용하고, 특정 조건을 만족하는 요청입니다. 예를 들어, 다음과 같은 GET 요청은 단순 요청으로 간주됩니다:
GET /api/data HTTP/1.1
Host: api.example.com
Origin: https://mywebsite.com

 

 
 

 

2. 프리플라이트 요청(Preflight Requests): PUT, DELETE와 같은 메서드를 사용하거나, 사용자 정의 헤더를 포함하는 요청입니다. 이 경우, 브라우저는 실제 요청을 보내기 전에 OPTIONS 메서드를 사용하여 서버에 허용 여부를 확인합니다.

CORS 설정 방법

CORS를 설정하는 방법은 서버의 종류에 따라 다릅니다. 예를 들어, Node.js의 Express 프레임워크를 사용하는 경우, cors 미들웨어를 사용하여 쉽게 설정할 수 있습니다.

 

Node.js Express 예시

const express = require('express');
const cors = require('cors');
const app = express();

// CORS 설정
app.use(cors({
    origin: 'https://mywebsite.com', // 특정 출처만 허용
    methods: ['GET', 'POST', 'PUT', 'DELETE'], // 허용할 메서드
    allowedHeaders: ['Content-Type', 'Authorization'] // 허용할 헤더
}));

app.get('/api/data', (req, res) => {
    res.json({ message: 'Hello from API!' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});
 

위의 예시에서 cors 미들웨어를 사용하여 https://mywebsite.com에서 오는 요청만 허용하도록 설정했습니다.

 

네이버클라우드플랫폼에서의 CORS

API Gateway

  1. 네이버 클라우드 플랫폼 콘솔에서 Services > Application Services > API Gateway 메뉴를 차례대로 클릭해 주십시오.
  2. My Products 메뉴를 클릭해 주십시오.
  3. Product 목록에서 대상 Product의 APIs 열의 을 클릭해 주십시오.
    • 상세 정보의 APIs 목록에 있는 API 이름을 클릭하면 해당 API가 선택된 API 목록 화면으로 이동합니다.
  4. API 목록에서 확인 및 설정할 리소스가 있는 API를 클릭해 주십시오.
  5. [Resources] 탭을 클릭해 주십시오.
  6. 리소스 목록에서 확인 및 설정할 리소스를 클릭해 선택한 후 [리소스 보기] 버튼을 클릭해 주십시오.
  7. CORS(기본 설정값: 비활성)를 설정하려면 활성화 CORS를 클릭해 활성화한 후 추가 헤더 항목을 설정해 주십시오.
    • 추가 헤더 항목에 대한 자세한 내용은 리소스 생성의 7번 절차를 참조해 주십시오.
  8. [수정] 버튼을 클릭해 주십시오.
    • CORS 활성화로 설정한 경우 OPTIONS 메서드가 생성되고 해당 리소스 목록에 표시됩니다.

글로벌엣지

Global Edge 관리 콘솔의 룰빌더 항목에서 매니지드 룰의 CORS 기능을 활성화하면, CORS HTTP 헤더를 간편하게 추가할 수 있습니다.

 

오브젝트스토리지

  1. CORS 규칙 조회
    • 아래 명령어를 사용하여 CORS 설정이 올바르게 구성되었는지 확인합니다.
    aws --endpoint-url=https://kr.object.ncloudstorage.com s3api get-bucket-cors --bucket
  2. CORS 설정 테스트
    • 다음 명령어는 curl을 통해 OPTION 요청을 보내고, Origin 헤더와 Access-Control-Request-Method 헤더를 설정하여 CORS 설정을 확인합니다.
    curl -i https://kr.object.ncloudstorage.com// -H "Access-Control-Request-Method: " --request OPTIONS -H "Origin: "
  3. 응답 확인
    • 성공적인 요청의 경우, 응답 Header에 "Access-Control-Allow-Origin"와 "Access-Control-Allow-Methods"가 노출됩니다.
    • 다음의 헤더가 노출될 경우, CORS 요청이 허용된 것을 나타냅니다.
    Access-Control-Allow-Origin: <origin>
Access-Control-Allow-Methods: <method>

 

결론

CORS는 현대 웹 애플리케이션에서 필수적인 요소입니다. 이를 통해 다양한 출처 간에 안전하게 리소스를 공유할 수 있으며, 개발자는 CORS를 적절히 설정하여 보안을 유지하면서도 필요한 기능을 구현할 수 있습니다. CORS에 대한 이해는 웹 개발자에게 매우 중요하며, 이를 통해 더 나은 사용자 경험을 제공할 수 있습니다.
저작자표시 비영리 변경금지