CORS에 대해 알아보자(Feat. Flask)

처음 프로젝트를 하면서 마주친 에러 중 하나가 바로 CORS(Cross-Origin Resource Sharing) 에러이다. 오늘은 코스에 대해서 자세히 알아보도록 하겠다.

 

코스는 사실 보안과 관련된 것이다. 정확히 말하면 브라우저가 기본으로 가지고 있는 보안 장치라고 볼 수 있을 것 같다. 웹 서비스를 개발하면 브라우저를 사용하게 되고 특별한 설정을 하지 않아도 브라우저가 알아서 코스라는 것을 검사하게 된다. 그럼 코스가 검사하는 것이 무엇이냐 하면 Origin, 즉 원본을 검사한다. 쉽게 말하자면 프런트와 백의 통신간 주소가 일치하는지 검사한다는 것이다. 만약 프런트가 백에 요청한 주소가 아닌 다른 주소에서 정보가 들어오면 어떻게 될까? 이것이 바로 해킹이다. 따라서 브라우저는 요청한 주소가 아닌 주소에서 오는 응답은 안 받을 거임! 하는 것이 코스라고 보면 된다.

그러면 같은 주소인지는 어떤 기준으로 판별할까? 주소는 보통 https://mateofwind24.tistory.com/manage/newpost/ 이런식으로 되어있다. 앞의 https:// 이부분은  프로토콜이라고 한다. 뒤의 mateofwind24.tistory.com 이부분은이 부분은 호스트라고 한다. 사실 여기서는 보이지 않지만 포트정보도 같이 들어있는 경우가 있다. 그리고 뒤에 /manage/불라불라... 이 부분은 패스(path)이다. 패스 뒤에는 GET요청인 쿼리 같은 것들이 있을 수 도 있다. 코스는 여기서 프로토콜과 호스트와 포트가 같은지 검사한다. 이 셋 중에 하나라도 다르면 프런트에서 요청 보낸 주소에서 온 응답이 아니라고 판단한다.

 

따라서 코스 오류가 났다면 위와 같은 문제가 발생했다는 뜻이다. 문제를 해결하기 위해서는 먼저 코스 설정을 해주어야 한다. 경우에 따라서는 프런트나 백 한쪽에서만 설정해도 문제가 해결되기도 하지만 양쪽에서 다 해줘야 하는 경우도 있다. Flask에서는 코스를 해결해주는 모듈이 존재한다.

pip install flask_cors

pip를 이용해 코스 모듈을 설치해주자. 그리고 모듈을 임포트 해준다.

from flask_cors import CORS
app = Flask(__name__)
CORS(app)

app으로 이름을 적었다면 CORS로 app을 감싸준다. 그러면 끝! 이렇게 하면 코드 전체에 걸쳐 코스 설정이 적용된다. 만약 패스별로 설정을 다르게 하고 싶다면 그럴 일이 있을까 싶긴 하지만 app 뒤에 콤마를 찍고 해당 패스를 적어주고 포트도 제한하고 싶다면 포트까지 적어주면 된다.

CORS(app, resources={r'/abcd/*': {'origins': 'https://mateofwind24.com:5000'}})

abcd패스에 뒤의 주소와 포트만 허용해준 것이다. 그냥 전체 허용 쓰자.