[Flask & React] API 호출시 403 Forbidden, CORS 에러 발생

상황 분석

1. 로컬에서 React를 3000번 포트로, Flask를 5000번 포트로 동시에 구동중

2. React -> Flask 서버로 API 호출시도

3. 콘솔에서는 CORS 에러, Flask에 요청 들어가지 않음.

 

개발 환경

- PC : M2 Pro Macbook Pro

- Pycharm, Python3.9, Flask

- Webstorm, TypeScript5.1.3, React

 

해결 시도

1. flask에서 flask_cors의 CORS를 통한 설정

 

2. React의 package-json 내부에 proxy 설정 (시도 후 제거)

 

3. React의 Axios withCredentials 설정 (최종)

 

사실 정상적인 상태라면, 로컬에서 두 서버를 동시에 구동중이며, flask및 React에서 CORS와 Credentails를 모두 허용 하기에 정상 작동이 되어야 한다. 그럼에도 오류 발생하여 react와 flask 각각의 포트와 구성 확인 중 flask에서 자체적으로 403을 반환하는 것을 확인

 

원인 및 해결 방법 (결론)

결론적으로는, 맥북의 AirPlay 기능이 문제였다..........

Airplay의 데이터 수신이 5,000 Port를 쓰고 있기에 에러가 발생하는 것이었다.

즉 React의 localhost:5000 요청이 내 flask 서버로 가기 전에 AirPlay에서 거부를 맡고 flask는 엥?? 머임? 뭔 일 있음? 하고 있었던 것.

해결 방법 -> AirPlay 수신 모드를 끄거나, Flask의 포트를 5001 등 편한 포트로 변경 (미사용 포트)

airplay.. 너가 문제라니..

 

포트 변경 후 정상 작동하는 모습