웹 개발을 하다 보면 API를 호출하는 과정에서 종종 CORS(Cross-Origin Resource Sharing) 오류를 경험하게 됩니다. 이 오류는 보안상의 이유로 발생하며, 이를 해결하기 위해서는 몇 가지 기본적인 이해가 필요합니다.
이번 글에서는 CORS 오류의 개념과 이를 해결하는 방법에 대해 자세히 알아보겠습니다.
CORS의 기본 개념
CORS는 “교차 출처 리소스 공유”라는 의미로, 서로 다른 출처 간에 리소스를 공유할 수 있도록 하는 웹 표준입니다. 웹 애플리케이션은 동일 출처 정책(Same-Origin Policy)이라는 보안 정책에 따라, 같은 출처에서만 데이터를 요청할 수 있도록 제한됩니다.
여기서 ‘출처’란 URL의 스킴(프로토콜), 호스트(도메인), 포트 등을 포함한 개념입니다. 예를 들어, https://example.com이라는 웹사이트에서 https://api.example.com으로 데이터를 요청할 경우, 두 출처는 서로 다르기 때문에 기본적으로 요청이 차단됩니다.
이는 악의적인 사용자가 다른 출처의 사이트에서 데이터를 요청하거나 조작하는 것을 방지하기 위한 조치입니다. CORS는 이러한 제한을 완화하여, 특정 조건을 만족하는 경우에만 다른 출처에서의 요청을 허용하도록 설정할 수 있는 방법입니다.
서버 측에서 적절한 CORS 헤더를 설정함으로써, 브라우저는 요청을 허용할 수 있습니다.
| 구성 요소 | 설명 |
|---|---|
| 스킴 | HTTP 또는 HTTPS와 같은 프로토콜 |
| 호스트 | 도메인 이름 |
| 포트 | 서버의 포트 번호 (기본값은 80 또는 443) |
CORS 오류의 발생 원인
CORS 오류는 여러 가지 이유로 발생할 수 있습니다. 일반적으로는 다음과 같은 경우에 발생합니다.
- 서버에서 CORS 헤더 미설정: 서버측에서 CORS 관련 헤더인
Access-Control-Allow-Origin을 설정하지 않으면, 브라우저는 해당 요청을 차단합니다. - 비정상적인 요청: 요청의 모드가
no-cors로 설정되어 있거나, 특정 HTTP 메서드를 사용할 때 CORS 오류가 발생할 수 있습니다. 예를 들어, PUT, DELETE 등의 메서드는 기본적으로 CORS 정책에 의해 차단될 수 있습니다. - HTTPS와 HTTP의 혼용: HTTPS 웹사이트에서 HTTP로 API를 호출하면, 보안상의 이유로 요청이 거부될 수 있습니다.
이러한 오류는 개발자는 물론 사용자에게도 큰 불편을 초래할 수 있습니다. 따라서 CORS 오류를 해결하기 위한 방안이 필요합니다.
| 발생 원인 | 설명 |
|---|---|
| 서버에서 CORS 헤더 미설정 | API 서버에서 요청 허용을 위한 헤더가 없음 |
| 비정상적인 요청 | 요청 방식이나 모드가 CORS 정책을 위반함 |
| HTTPS와 HTTP의 혼용 | 보안 프로토콜이 일치하지 않음 |
CORS 오류 해결 방법
CORS 오류를 해결하기 위해서는 여러 가지 방법이 있습니다. 이 중에서 가장 일반적인 몇 가지 방법을 소개하겠습니다.
서버에서 CORS 헤더 설정하기
가장 확실하고 근본적인 해결 방법은 서버 측에서 CORS 헤더를 설정하는 것입니다. 이를 위해서는 서버의 응답 헤더에 Access-Control-Allow-Origin을 추가해야 합니다.
이 헤더는 허용할 출처를 지정하며, 여러 출처를 허용하려면 쉼표로 구분해서 나열할 수 있습니다. 모든 출처를 허용하고 싶다면 *를 사용할 수 있지만, 보안상의 이유로 권장되지 않습니다.
예를 들어, Node.js의 Express 프레임워크를 사용할 경우, 다음과 같이 CORS를 설정할 수 있습니다.
“`javascript
const express = require(‘express’);
const cors = require(‘cors’);
const app = express();
app.use(cors({
origin: ‘https://example.com’ // 허용할 출처
}));
app.get(‘/api/data’, (req, res) => {
res.json({ message: ‘CORS 설정 완료!’ });
});
app.listen(3000, () => {
console.log(‘서버가 3000번 포트에서 실행 중입니다.’);
});
“`
프록시 서버 사용하기
직접적으로 서버를 관리할 수 없는 경우, 프록시 서버를 사용하는 방법도 있습니다. 프록시 서버는 클라이언트의 요청을 받아서 다른 서버로 전달하고, 그 응답을 다시 클라이언트로 전달하는 역할을 합니다.
이를 통해 CORS 정책을 우회할 수 있습니다. 예를 들어, cors-anywhere라는 오픈 소스를 사용하면 쉽게 프록시 서버를 설정할 수 있습니다.
Heroku에 배포된 이 서비스를 사용하면, 다음과 같은 방식으로 API를 호출할 수 있습니다.
https://cors-anywhere.herokuapp.com/[API 요청 주소]
이렇게 프록시 서버를 사용하면, 원래의 CORS 정책을 우회하여 데이터를 가져올 수 있습니다. 그러나 이 방법은 보안상 취약할 수 있으니, 신뢰할 수 있는 API에만 사용하시기 바랍니다.
| 해결 방법 | 설명 |
|---|---|
| 서버에서 CORS 헤더 설정 | API 서버에서 요청 허용을 위한 헤더 추가 |
| 프록시 서버 사용 | 클라이언트와 서버 간의 요청을 중계하여 CORS 우회 |
CORS 오류 예방을 위한 모범 사례
CORS 오류를 예방하기 위해서는 몇 가지 모범 사례를 따르는 것이 좋습니다.
-
정확한 출처 설정:
Access-Control-Allow-Origin헤더를 사용할 때, 가능한 한 구체적인 출처를 설정하는 것이 좋습니다. 모든 출처를 허용하는 것(*)은 보안에 취약할 수 있습니다. -
Preflight 요청 이해하기: CORS 요청 중 일부는 ‘Preflight’ 요청을 발생시키며, 이는 브라우저가 서버에 실제 요청을 보내기 전에 허용 여부를 확인하는 과정입니다. 이 과정에서 적절한 CORS 헤더가 설정되어 있는지 확인해야 합니다.
-
HTTPS 사용: API 호출 시 HTTPS를 사용하는 것이 좋습니다. 이는 보안성을 높이는 가장 기본적인 방법 중 하나입니다.
-
정기적인 보안 점검: API 서버의 CORS 정책을 정기적으로 점검하여, 불필요한 출처가 허용되고 있지 않은지 확인하는 것이 필요합니다.
| 예방 방법 | 설명 |
|---|---|
| 정확한 출처 설정 | 특정 출처만 허용하여 보안 강화 |
| Preflight 요청 이해하기 | 요청 전에 허용 여부를 확인하는 과정 이해 |
| HTTPS 사용 | 보안성을 높이기 위해 HTTPS 사용 |
| 정기적인 보안 점검 | 출처 설정 및 CORS 정책 점검 |
CORS 오류는 웹 개발 중 흔히 발생하는 문제이지만, 알아보고 적절한 방법으로 대처한다면 충분히 해결할 수 있는 문제입니다. 위에서 소개한 방법들을 참고하여 안전하고 원활한 API 통신을 구현해 보시기 바랍니다.
