CORS 개념과 오류 해결방법

CORS와 관련한 오류가 있는데, 이런 부분을 확인을 해보세요

CORS 오류 한 번쯤은 겪을 오류인데, 이 글로 미리 파악하세요

웹 개발을 하다 보면 다른 도메인 간에 데이터를 요청하거나 가져올 일이 자주 발생합니다. 이때 발생하는 보안상의 제약을 해결해 주는 것이 바로 CORS(Cross-Origin Resource Sharing)입니다. 하지만 CORS 정책에 의해 발생하는 오류는 웹 개발자들이 자주 마주하는 문제 중 하나입니다. 이 글에서는 CORS의 기본 개념을 소개하고, 실제로 발생할 수 있는 오류 예시와 그 해결 방법을 살펴보겠습니다.

목차

CORS(Cross-Origin Resource Sharing)

CORS란?

CORS는 Cross-Origin Resource Sharing의 약자로, 웹 페이지가 자신과 다른 도메인, 프로토콜, 포트에서 리소스를 요청할 수 있도록 허용하는 보안 메커니즘입니다. 기본적으로 웹 브라우저는 동일 출처 정책(Same-Origin Policy)을 따르는데, 이는 보안을 위한 제약으로 다른 도메인에서 리소스를 요청하는 것을 제한합니다. CORS는 이러한 제한을 허용하는 방법을 제공합니다.

CORS가 동작되는 원리

브라우저가 다른 출처의 서버에 요청을 보내면, 서버는 Access-Control-Allow-Origin 헤더를 사용하여 이 요청을 허용할지 말지를 결정합니다. 예를 들어, A 도메인에서 B 도메인에 API 요청을 보내는 경우, B 도메인은 A 도메인의 요청을 허용한다는 것을 Access-Control-Allow-Origin 헤더로 명시해야 합니다.

CORS 오류와 해결 방법

No 'Access-Control-Allow-Origin' header is present

클라이언트에서 다른 출처의 서버로 요청을 보냈을 때 서버가 CORS 정책을 허용하지 않아서 발생

서버 측에서 CORS를 허용하는 헤더를 추가해야 합니다. 예를 들어, Node.js와 Express를 사용하고 있다면 다음과 같이 cors 미들웨어를 설치하여 CORS를 설정을 할 수 있으며, 아래의 방법을 참고하시면 됩니다.

npm install cors

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

app.use(cors());  // 모든 요청 허용

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

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

cors({ origin: 'http://example.com' }) // 특정 도메인만 허용을 하고 싶을 때

Preflight request failed

CORS 요청이 OPTIONS 메서드를 사용하여 "preflight" 요청을 보낼 때 발생할 수 있는 오류

요청 헤더나 메서드가 서버에서 허용되지 않은 경우 발생합니다. 예를 들어, PUT 메서드나 커스텀 헤더를 사용하는 경우 preflight 요청이 필요할 수 있습니다. 아래의 방법을 참고 하시면 됩니다.

app.options('/data', cors());  // Preflight 요청 응답 처리

app.use(cors({
  methods: ['GET', 'POST', 'PUT']  // 허용된 HTTP 메서드 지정
}));

CORS 설정 주의사항

보안: CORS 설정 시 너무 광범위하게 허용하면 보안 위험이 있을 수 있습니다. 예를 들어, Access-Control-Allow-Origin으로 모든 도메인을 허용하는 것보다는 필요한 도메인만 허용하는 것이 좋습니다.

쿠키와 인증 정보: CORS 요청에서 쿠키나 인증 정보를 보내려면 credentials 옵션을 설정해야 합니다. 예를 들어, credentials: 'include'로 설정하여 요청 시 쿠키를 포함시킬 수 있습니다.

마무리

CORS는 웹 애플리케이션에서 서로 다른 출처 간에 리소스를 공유할 수 있도록 하는 중요한 메커니즘입니다. 그러나 CORS 정책을 잘못 설정하면 여러 가지 오류가 발생할 수 있으므로, 이를 정확히 이해하고 적절히 설정하는 것이 중요합니다. 이번 글에서는 CORS의 기본 개념과 함께 자주 발생하는 오류 예시와 그 해결 방법을 살펴보았습니다. CORS를 제대로 설정하여 원활한 API 통신을 구현하시길 바랍니다.