• CORS 개념 참고

프론트/백 나누어서 개발을 할 때 각각 서버가 다르다 보니까 요청하는 서버와 요청을 받는 서버가 다르다.

• Vue 서버는 5173 포트를 사용하고 Api서버는 7777포트를 사용하고 있음

크롬 같은 경우 SOP 정책에 의해 Origin(현재 상황에서는 Port)가 다른 경우 요청을 차단함

• 즉, API 서버나 웹 서버에서 차단하는 것이 아닌 브라우저에 의해 차단되는 상황
• 웹 서버에서 API를 보내기 전 API 서버로 전송이 되나 Health Check 개념을 실행하는데 이것을 통과해야 만 정상적으로 API요청을 하는 구조임
  • SOP정책에 걸린 것은 Health Check 걸린 것

1. 요청 서버에서 Origin 통일 시키기

• 각 프레임워크 config 및 설정파일에서 추가

→ Proxy 개념을 사용하여 API 요청을 보낼 때 5173 포트가 아닌 7777포트로 감싸여 오리진 통일 후 요청

1. API 서버에서 CORS 설정 하기

• 특정 주소와 포트에서 날라오는 요청은 CORS 설정을 해제할 수 있음