CORS 개념 설명: 기술적 구현까지

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드/백엔드 개발자, API 개발자, 웹 애플리케이션 개발자

핵심 요약

CORS는 브라우저에서 강제하는 보안 기능으로, 다른 도메인의 리소스 접근을 제어합니다.
Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers 등의 CORS 헤더가 핵심입니다.
preflight 요청(OPTIONS 메서드)을 통해 서버가 요청을 허용하는지 확인하고, 허용 시 실제 요청이 진행됩니다.

섹션별 세부 요약

1. CORS 개념 및 원리

CORS는 브라우저에서 실행되는 웹페이지가 다른 도메인의 리소스에 접근할 때 보안을 강화하는 기능입니다.
origin은 프로토콜, 도메인, 포트로 구성되며, 이 중 하나라도 다를 경우 cross-origin 요청으로 간주됩니다.
Access-Control-Allow-Origin 헤더가 없거나 '*'로 설정된 경우, 브라우저는 요청을 차단합니다.

2. CORS 요청 흐름

preflight 요청(OPTIONS 메서드)을 통해 서버가 요청을 허용하는지 확인합니다.
서버가 Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers 등의 헤더를 반환하면, 브라우저는 실제 요청을 진행합니다.
예시:

```http

OPTIONS /data HTTP/1.1

Origin: https://myfrontend.com

Access-Control-Request-Method: POST

Access-Control-Request-Headers: Content-Type

```

3. CORS 헤더 설명

Access-Control-Allow-Origin: 허용할 도메인을 지정합니다.
Access-Control-Allow-Methods: GET, POST, PUT, DELETE 등 허용할 HTTP 메서드를 지정합니다.
Access-Control-Allow-Headers: 요청에 포함할 수 있는 헤더를 지정합니다.
Access-Control-Allow-Credentials: 쿠키나 인증 정보를 포함할 수 있는지 여부를 지정합니다.

4. CORS 설정 예시 (Express.js)

수동 설정 예시:

```javascript

app.use((req, res, next) => {

res.header("Access-Control-Allow-Origin", "https://myfrontend.com");

res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");

res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");

res.header("Access-Control-Allow-Credentials", "true");

next();

});

```

cors 미들웨어 사용 예시:

```bash

npm install cors

```

```javascript

const cors = require('cors');

app.use(cors({

origin: 'https://myfrontend.com',

credentials: true,

methods: ['GET', 'POST', 'PUT', 'DELETE'],

allowedHeaders: ['Content-Type', 'Authorization']

}));

```

5. CORS 오류 및 해결 방법

"Access to fetch at 'X' from origin 'Y' has been blocked by CORS policy": 서버가 Access-Control-Allow-Origin 헤더를 올바르게 설정하지 않았습니다.
"Request header field X is not allowed by Access-Control-Allow-Headers": 서버가 요청 헤더를 허용하지 않습니다. Access-Control-Allow-Headers에 해당 헤더를 추가해야 합니다.
"Method X is not allowed by Access-Control-Allow-Methods": 서버가 해당 메서드를 허용하지 않습니다. Access-Control-Allow-Methods에 메서드를 추가해야 합니다.
"Wildcard '' not allowed with credentials": Access-Control-Allow-Origin: 은 인증 정보가 포함된 요청에 사용할 수 없습니다. 정확한 도메인을 지정해야 하며, Access-Control-Allow-Credentials: true를 설정해야 합니다.

6. CORS 디버깅 방법

브라우저 개발자 도구를 사용하여 Network 탭에서 실패한 요청을 확인합니다.
Preflight 요청(OPTIONS 메서드)의 응답 헤더를 확인하여 CORS 설정이 올바른지 확인합니다.
Console 탭에서 CORS 오류 메시지를 확인합니다.

7. CORS 보안 고려사항

Access-Control-Allow-Origin: *는 민감한 API에 사용하지 않아야 합니다.
인증 정보(쿠키, 인증 헤더)가 포함된 요청은 Access-Control-Allow-Credentials: true와 함께 정확한 도메인을 지정해야 합니다.
허용할 HTTP 메서드와 헤더에 대해 엄격하게 설정해야 합니다.

결론

CORS는 브라우저에서 강제하는 보안 기능으로, 다른 도메인의 리소스 접근을 제어합니다. Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers 등의 헤더를 통해 요청을 허용하거나 차단할 수 있습니다. preflight 요청(OPTIONS 메서드)을 통해 서버가 요청을 허용하는지 확인한 후, 실제 요청이 진행됩니다. Express.js에서는 cors 미들웨어를 사용하여 간단히 설정할 수 있습니다. 보안을 위해 민감한 API에 Access-Control-Allow-Origin: *를 사용하지 않도록 주의**해야 합니다.