Flask CORS - 다른 도메인 주소 허용하기 (CORS 허용 설정, 오류 해결 방법)

개요

이번에 포트폴리오 겸 Flask 서버를 둔 채팅 서비스 웹 페이지를 만들었다.

개발된 웹 페이지를 도메인까지 연결했는데 이상하게 가끔씩 작동을 하지 않는다.

이유가 뭔지 알아봤더니 접속 도메인은 babychat.xyz,

그리고 www.babychat.xyz 로도 접속이 된다는 것이다.

나는 이게 당연한 것인 줄 알았는데 CORS로 문제가 발생될 줄은 몰랐다.

결국 문제는 API 통신이 babychat.xyz 도메인을 향하도록 했으니 www 가 붙으면 작동을 하지 않는다는 것이다.

간단히 CORS에 대해서 알아보자.

CORS는 Cross-origin resource sharing으로, 한국말로는 교차 출처 리소스 공유 혹은 교차 출처 자원 공유라고도 한다.

웹 페이지 상의 자원들을 다른 도메인으로부터 요청할 수 있게 허용하는 것을 말한다.

쉽게 말하면, 내가 만든 babychat.xyz 사이트의 기능(로그인, 회원가입 등)을 다른 도메인 www.babychat.xyz에서도 사용할 수 있도록 허용하는 것이다.

그러나 비동기로 처리해야 할 경우(Ajax 요청), 동일-출처 보안 정책에 의해 기본적으로 금지된다.

내가 만든 채팅 사이트는 Flask를 서버로, 채팅을 위한 소켓 데이터와 API 통신이 주가 되므로 Ajax 요청처리를 해야 한다.

그래서 CORS 오류가 발생되는 것이다.

* 동일-출처 보안 정책(Same-origin policy) : 하나의 출처에서 로드된 문서나 스크립트가 다른 출처의 리소스와 상호작용할 수 있는 방법을 제한하는 보안 메커니즘, 잠재적으로 악의적인 문서를 격리하여 가능한 공격 경로를 줄이는데 도움을 준다.

이 포스팅은 운영되는 서버가 Flask 이므로 이 것에 한해 다루도록 한다.

Flask에서 CORS를 허용하게 하려면 flask_cors라는 추가 모듈이 필요하다.

터미널을 통해 모듈 설치를 진행하자.

pip install flask_cors

Flask 인스턴스로 생성된 객체를 추가한 모듈 CORS를 이용하여 허용 설정을 해준다.

아래는 예시를 위할 뿐, 본인들이 생성한 Flask 인스턴스의 이름을 넣으면 된다.

app = Flask(__name__)

CORS(app, origins="주소")

# 예시
# CORS(app, origins=["http://www.babychat.xyz", "http://babychat.xyz"])