[React] localhost:3000 -> flask 서버 통신 시 CORS 에러 해결 과정

리액트로 만든 웹 -> Docker Image로 배포한 flask 서버로 데이터를 주고 받으려고 한다.

-> 참고 https://dongsu96.tistory.com/132

 

라이브러리 axios를 이용해 해당 url로 요청을 보냈는데 오류가 뜬다.

F12를 눌러 개발자도구의 console 탭에서 내용을 확인해보니 이런 에러 메세지가 떴다.

 

Access to XMLHttpRequest at 'https://q42up841da.execute-api.ap-northeast-2.amazonaws.com/movie/15' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

검색해보니 CORS 에러였다.

CORS 에러란? 

CORS (Cross-Origin Resource Sharing) 정책 위반으로 인한 것입니다.

브라우저는 웹 페이지가 다른 도메인으로부터 자원을 요청할 때 보안 상의 이유로 이를 차단합니다. (ChatGPT)

---

해결방법

pip install flask_cors

-> 사용중인 가상환경에 위 모듈을 설치한 후에

from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 모든 경로에 대해 CORS를 활성화합니다.

app.py로 가서 위 코드를 추가 한 후 git actions를 이용해 배포자동화했다.

 

---

잘 배포된 걸 확인 후 다시 요청해봤는데, 또 오류가 떠서 AWS CloudWatch로 가서 로그를 확인해봤다.

 

분명 flask_cors 모듈을 설치했는데 import 오류가 뜬다. 

 

해결방법

 

flask_cors 모듈 설치는 로컬에서만 했기 때문에

Docker Image 배포할 때, flask_cors 모듈이 종속성에 포함되어 있지 않았기 때문에 import 에러가 떴던 것이다.