개요
Flask – React를 사용하여 백오피스 개발 시 API(Flask)의 도메인과 Front(React)의 도메인을 다르게 설정할 경우 Front에서 API로 요청 시 CORS 이슈가 발생하여 데이터를 정상적으로 받아올 수 없습니다. 해당 경우 정상적으로 통신을 하기 위해서는 몇가지 설정이 필요합니다.
CORS
https://test-a.com 프론트엔트에서 XMLHttpRequet로 https://test-b.com의 도메인으로 요청할 경우 보안 이슈로 Http 요청을 제한합니다. 웹 어플리케이션은 자신의 출처(도메인?)와 동일한 출처의 리소스만 불러올 수 있으며, 다른 도메인의 리소스를 받기 위해서는 다른 도메인에서 CORS 헤더를 포함한 응답을 반환해야합니다.
설정
패키지 설치
Flask에서 CORS 설정을 해주기 위해서는 flask-cors 설치가 필요합니다
pip install flask-cors해결방법
해결하기 위해서는 서버 측에서 CORS 정책을 설정해야 합니다. Python Flask 애플리케이션에서는 flask-cors 라이브러리를 사용하여 CORS 정책을 설정할 수 있습니다. 이미 코드에 flask-cors가 import 되어 있으므로, 설정을 조정하여 문제를 해결할 수 있습니다.
@app.route('/access/key', methods=['POST', 'GET']) 에 대한 CORS 설정을 다음과 같이 수정해 보겠습니다.
@cross_origin(headers=['Content-Type']) 부분은 요청 헤더 중 ‘Content-Type’을 허용하도록 설정합니다. 이렇게 하면 ‘Access-Control-Allow-Headers’에 ‘Content-Type’이 포함되어 브라우저에서 해당 요청을 허용하게 됩니다.
위의 코드를 적용한 후 서버를 다시 실행하고, 클라이언트 측에서 다시 요청을 보내보시기 바랍니다. 이로써 CORS 에러가 해결되어야 합니다.