CORS 문제 해결 방법

개요

웹 개발을 하다 보면 CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 문제에 부딪힐 수 있습니다. 이 문제는 브라우저 보안을 위해 발생하는 것이며, 본 글에서는 CORS 문제와 이를 해결하는 방법에 대해 자세히 알아보겠습니다.

CORS가 뭔가요?

CORS는 웹 페이지가 다른 도메인의 리소스에 접근하려고 할 때 발생하는 보안 문제입니다. 예를 들어, example1.com에서 동작하는 웹 페이지가 example2.com의 API를 호출하려고 할 때 이 문제가 발생할 수 있습니다.

서버에서 CORS 설정하기

서버의 응답 헤더에 Access-Control-Allow-Origin 값을 설정함으로써 CORS 문제를 해결할 수 있습니다.

• Node.js와 Express 사용 예

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});

• Python과 Flask 사용 예

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

이렇게 설정하면 모든 도메인에서 해당 서버의 리소스에 접근할 수 있게 됩니다.

프론트엔드에서 CORS 문제 해결하기

JavaScript의 fetch나 axios 라이브러리를 사용할 때는 서버에서 헤더를 설정하지 않았다면 CORS 문제가 발생할 수 있습니다. 이럴 때는 프록시를 사용해 문제를 해결할 수 있습니다.

• React에서 create-react-app 사용 예

// package.json에 아래 설정 추가
"proxy": "http://localhost:5000"

CORS 문제를 안전하게 해결하기

모든 도메인을 허용하는 대신, 특정 도메인만 허용하는 방법을 사용할 수 있습니다. 이렇게 하면 보안을 높일 수 있습니다.

• Node.js와 Express에서 특정 도메인만 허용하기

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://example1.com');
  next();
});

정리

CORS 문제는 웹 개발에서 자주 마주치는 보안 문제입니다. 이 문제를 해결하기 위해 서버 설정을 바꾸거나 프론트엔드 코드에 프록시를 설정할 수 있습니다. 특정 도메인만 허용하는 방법을 사용하면 보안을 더욱 강화할 수 있습니다.