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

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

클라이언트 포트는 3000이고, 노드 서버 포트는 5000입니다.

작성

·

860

0

좋은 강의 제공해 주셔서 감사합니다!

강의 수강 도중 궁금한 점이 생겨서 질문 드립니다!

클라이언트(http://localhost:3000)에서 HTTP 요청을 할 때,

api/video/uploadfiles

와 같은 식으로 요청하게 되면 기본적으로

http://localhost:3000/api/video/uploadfiles 의 주소로 서버에 request가 날라가더군요 ㅠ

그래서 명시적으로 다음과 같이 axios를 이용한 HTTP 요청의 url 부분에

axios.post('http://localhost:5000/api/video/uploadfiles', formData, config)
        .then(response => {
            if(response.data.success) {
                console.log(response.data);
            } else {
                alert('비디오 업로드를 실패했습니다.');
            }
        })
        .catch(error => {
            console.log(error)
       });

이렇게 해 주고 있는데,

이처럼 클라이언트(port : 3000)와 서버(port : 5000)가 다른 포트 번호를 가지고 있을 때

저렇게 도메인+포트까지 다 명시를 해 줘야 하나요?

아니면 도메인+포트를 생략할 수 있는 방법이 있나요?

react nodejs redux mongodb

답변 3

1

지식공유자

아 혹시 setupProxy라는 파일적용 안하셨나요 ~ ???

기본 강의에 보면 Proxy를 설정해서 굳이 앞부분은 적시 하지 않아도 setupProxy라는 파일을 이용해서

request를 보낼떄 3000번에서 자동으로 5000으로 가게 되어있습니다 ^^

만약 proxy설정을 하지 않았다면 처음부터 적시를 해주셔야하며

그러할 경우에는 3000 번 포트와 5000포트의 origin이 다르기에 cors 설정이 들어가야합니다.

처음에 Boiler plate을 할떄 보시면 setupProxy가 이미 들어가 있습니다 ^^

그걸 이용하셔서 request를 하면 이 부분은 해결될거라 생각됩니다 ^^

0

지식공유자

넵 ^^ 막히실때에는 언제든 다시 질문주세요 화이팅입니다 !

0

질문자

아 감사합니다! 기존에 리액트하고 노드를 한 적이 있어서 강사님의 기초 강의를 듣지 않고 바로 이 강좌를 수강 중이었거든요. 그 부분 강의 듣고 올게요!

작성한 질문수