section22 의 CORS 관련 질문

Question

안녕하세요! 해당 수업에서 CORS 에러가 발생한 이유를 다른 작성자 분께서 질문해주셨는데, 강사님께서 프론트엔드와 백엔드의 포트가 달라서 그렇다고 대답해주셨습니다.   백엔드에서는 app.listen을 통해 포트를 설정을 해주었지만, 프론트엔드에서는 포트를 설정한 적이 없는데 포트번호를 어떻게 알 수 있나요..? 설정하는 방법이 따로 있는건가요? 그리고 이전수업에서 한 컴퓨터에서는 프론트엔드와 백엔드의 포트번호가 달라야한다고 말씀하셨는데, 그렇다면 하나의 컴퓨터에서는 same origin이 될 수 없는건가요?

노원두 · Answer

안녕하세요! 정욱 님! 프론트엔드는 보통 html을 open-with-liveserver로 열게 되시면 5500번 포트로 실행 되는 것을 확인하실 수 있어요! 혹은 리액트 등의 프론트엔드 라이브러리나 프레임워크를 사용하시면 관련된 포트 번호를 받으실 수 있습니다! 다음으로, 한 컴퓨터에서는 포트번호를 중복해서 사용할 수 없어요! 만약 same-origin을 만들고 싶다면, 해당 백엔드 서버에서 프론트엔드 html도 제공 해 주면 됩니다!^^ 이 방법은 약간 고전적인 방법이며, 프론트엔드 서버 없이, html 페이지 제공을 포함한 모든 것을 백엔드에서 제공(옛날에는 이 방식이 기본)한다고 보시면 되세요! 또 다른 방법으로는, 실제 포트는 프론트 서버 3000포트, 백엔드 서버 4000포트를 띄워놓고, 둘을 묶어주는 프록시서버 80 포트(nginx 등)를 앞단에 배치 하시는 방법이 있어요! 프록시서버 관련하여서는 뒷부분 MSA 맛보기 수업에서 실습해보실 수 있습니다!^^