문제: 클라이언트와 서버 간의 WebSocket 통신 시 CORS 정책으로 인한 접근 문제가 발생하는 상황.
해결 단계:
1. 서버 CORS 설정 확인
NestJS 애플리케이션에서 app.enableCors()를 사용하여 CORS를 설정.
origin에 클라이언트 도메인 주소를 추가하고 credentials: true로 설정.
2. 클라이언트 CORS 설정
클라이언트 측에서 io() 호출 시 withCredentials: true를 설정하여 CORS 요청을 허용.
3.소켓 경로 확인
클라이언트에서 소켓 연결 시 사용하는 경로와 서버에서 해당 경로를 제대로 처리할 수 있는지 확인.
4.서버 및 클라이언트 포트 일치 확인
서버와 클라이언트가 같은 포트에서 실행 중인지 확인.
5.socket.io 버전 호환성
서버와 클라이언트 양쪽에서 socket.io 버전이 호환되는지 확인.
6.브라우저 개발자 도구 활용
브라우저 개발자 도구의 콘솔 및 네트워크 탭을 확인하여 자세한 오류 메시지와 네트워크 요청을 분석.
7.서버 로그 확인
서버에서 발생하는 로그를 확인하여 요청과 응답을 추적하며 문제 해결.
오늘의 질의 응답😎
CORS(Cross Origin Resource Sharing)에 대해 설명해주세요.
나의 답변 😄
CORS는 웹 애플리케이션이 한 도메인에서 다른 도메인으로 리소스를 요청할 때 발생하는 보안 정책입니다. 웹 브라우저는 이 정책을 통해 악의적인 요청을 방지하고 사용자 데이터를 보안하는 역할을 합니다. 웹 페이지는 동일 출처 정책에 따라 같은 도메인에서만 요청을 보낼 수 있습니다. 하지만 지금의 다양한 도메인 간의 상호작용을 위해 CORS가 도입되었습니다. 서버는 특정 도메인으로부터의 요청을 허용하기 위해 HTTP 헤더를 사용하며, 이를 통해 클라이언트와 서버 간의 안전한 통신이 이루어집니다.
