인프런 커뮤니티 질문&답변

장정욱님의 프로필 이미지

작성한 질문수

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

03-CORS

section22 의 CORS 관련 질문

해결된 질문

작성

·

361

0

 안녕하세요!

해당 수업에서 CORS 에러가 발생한 이유를 다른 작성자 분께서 질문해주셨는데, 강사님께서 프론트엔드와 백엔드의 포트가 달라서 그렇다고 대답해주셨습니다.

 

백엔드에서는 app.listen을 통해 포트를 설정을 해주었지만, 프론트엔드에서는 포트를 설정한 적이 없는데 포트번호를 어떻게 알 수 있나요..?

설정하는 방법이 따로 있는건가요?

그리고 이전수업에서 한 컴퓨터에서는 프론트엔드와 백엔드의 포트번호가 달라야한다고 말씀하셨는데, 그렇다면 하나의 컴퓨터에서는 same origin이 될 수 없는건가요?

답변 1

0

노원두님의 프로필 이미지
노원두
지식공유자

안녕하세요! 정욱님!

프론트엔드는 보통 html을 open-with-liveserver로 열게 되시면 5500번 포트로 실행되는 것을 확인하실 수 있어요!

혹은 리액트 등의 프론트엔드 라이브러리나 프레임워크를 사용하시면 관련된 포트 번호를 받으실 수 있습니다!

다음으로, 한 컴퓨터에서는 포트번호를 중복해서 사용할 수 없어요! 만약 same-origin을 만들고 싶다면, 해당 백엔드 서버에서 프론트엔드 html도 제공해 주면 됩니다!^^

이 방법은 약간 고전적인 방법이며, 프론트엔드 서버 없이, html 페이지 제공을 포함한 모든 것을 백엔드에서 제공(옛날에는 이 방식이 기본)한다고 보시면 되세요!

또 다른 방법으로는, 실제 포트는 프론트 서버 3000포트, 백엔드 서버 4000포트를 띄워놓고, 둘을 묶어주는 프록시서버 80 포트(nginx 등)를 앞단에 배치하시는 방법이 있어요!

프록시서버 관련하여서는 뒷부분 MSA 맛보기 수업에서 실습해보실 수 있습니다!^^

장정욱님의 프로필 이미지
장정욱
질문자

답변 감사합니다!

한가지 더 질문을 드리고 싶은데요!

CORS()를 설정해놓는다면 모든 사이트에 대해 허용이되어 보안상의 문제가 되진 않나요?

CORS(내프론트엔드주소)로 설정을해서 내 브라우저 주소만 허용가능하도록 하면 괜찮을까요??

노원두님의 프로필 이미지
노원두
지식공유자

네! 정욱님!

말씀하신 방법이 일반적인 방법입니다!^^