우주의 IT 소행성

상황 분석

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 등 편한 포트로 변경 (미사용 포트)

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

<Env>

Java17-Correto, Gradle, IntelliJ, JSP

JSP에서 useBean으로 src/main/java/user 내에 User 클래스 접근시 Cannot resolve class or package 오류 발생

<해결 방법>

1. Project Structure 진입

2. Project Settings -> Modules 진입 후 내 프로젝트 클릭 (여기선 SCH-webproj-2023)

3. 오른쪽 Module SDK 아래 + 버튼 클릭

4. 3.Module Dependency.. 클릭 후 [프로젝트명].main 의존성 추가

5. 해결