[IT] 백엔드 서버와 프론트엔드의 통신 URL

헷갈리는 부분이라 정리.

 

선수 지식

자체 서버를 구성하고 그 서버에서 돌아가는 백엔드와 달리, 프론트엔드는 사용자의 브라우저에서 돌아간다.

다시 말해 백엔드 서버에서의 localhost와 프론트엔드에서의 localhost는 서로 다른 장치를 가리킬 가능성이 있다.

 

브라우저의 출처(Origin) 정의 방법

출처(Origin)는 사용자가 실제 접속한 주소로 설정된다.

 

프론트엔드를 192.168.0.7이라는 IP를 가진 로컬 PC에서 3000번 포트로 돌렸을 경우를 가정해보자.

이 경우 localhost:3000으로도 페이지에 접속할 수 있고, 192.168.0.7:3000으로도 접속할 수 있다.

 

그렇다면 백엔드의 CORS 허용 설정은 접속한 주소를 기준으로 허용해주어야 한다.

즉 localhost:3000으로 접속했다면 localhost:3000이란 주소를 허용해주어야 하며, IP로 접속했다면 해당 IP 주소를 기준으로 허용해주어야 한다.

 

백엔드와 프론트엔드가 가리키는 localhost가 상이한 경우

이번엔 로컬 PC가 아닐 때를 가정해보자.

백엔드와 프론트엔드 웹서버가 모두 192.168.0.5라는 원격 서버에서 각각 8080, 3000 포트로 돌아가고 있다.

이때 프론트엔드에서 백엔드로 API 요청을 해야 한다.

백엔드와 프론트엔드가 같은 서버에 올라가 있으니, localhost:8080으로 요청해야 한다고 생각할 수 있다.

 

하지만 프론트엔드는 사용자의 브라우저에서 돌아가고 있다.

프론트엔드에서 localhost는 바로 사용자의 로컬 PC인 192.168.0.7을 가리킨다.

 

그래서 이 경우, 프론트 요청 주소와 백엔드 CORS 설정은 모두 192.168.0.5가 되어야 한다.

 

 

복습 문제

백엔드가 나의 로컬 PC인 192.168.0.7:8080에서, 프론트엔드가 원격 서버인 192.168.0.5:3000에서 돌아가고 있다면

(1) 프론트에서는 어떤 주소로 백엔드 API를 요청해야 하며, (2) 백엔드가 CORS를 허용해줘야 할 주소는 무엇일까?

 

정답

(1) http://localhost:8080(나의 로컬 PC이므로 가능) 또는 http://192.168.0.7:8080, (2) http://192.168.0.5:3000