백엔드와 프론트가 분리된 환경일 때 CORS 문제 해결하기 - 방법2) 웹서버 Nginx로 해결하기

아래 링크 "백엔드와 프론트가 분리된 환경일 때 CORS 문제 해결하기"의 두번째 방법이다.

https://annyeong46.tistory.com/69

백엔드와 프론트가 분리된 환경일 때 CORS 문제 해결하기 - Nginx 이용

---

Nginx란?

Nginx는 단일 도메인으로 보이도록 속임수를 쓰는 방법이다. 실제로는 백엔드와 프론트가 다른 도메인을 사용한다.

이런 방법을 Reverse Proxy라고 한다.

 

 

어떻게 속임수를 쓰는걸까?

위 그림을 보자.

백엔드 <-> 프론트 간의 통신할때 Nginx를 거친다.

또한 사용자 <-> 서버 간의 요청을 보낼때도 Nginx를 거친다.

이렇게 요청들이 Nginx를 거칠때 Nginx는 요청의 도메인(ip,포트)을 목적지의 도메인에 맞게 바꿔준다.

 

 

예를 들어

프론트와 백엔드가 다른 서버를 사용한다고 가정하자.

프론트 서버의 ip와 포트번호는 1.1.1.1:3000이고, 백엔드 서버의 ip와 포트번호는 2.2.2.2:8080 이다.

 

1. 사용자가 브라우저에서 https://naver.com/login GET 요청을 보낸다.

2. Nginx가 이 요청을 받고 1.1.1.1:3000/login GET으로 바꿔 프론트 서버에게 전달한다.

3. 프론트는 Nginx에게 https://naver.com/api 로 요청을 보낸다.

4. Nginx는 백엔드에게 2.2.2.2:8080/api 요청을 보낸다.

5. 백엔드에서 데이터를 처리하여 Nginx에게 보낸다.

6. Nginx는 프론트에게 1.1.1.1:3000/api로 데이터를 보낸다.

7. 프론트에서 데이터를 처리하여 Nginx에게 전달한다.

8. 최종적으로 Nginx에서 브라우저에게 답변을 보낸다.

 

이렇게 Nginx는 사용자, 백엔드, 프론트의 중간에서 도메인(ip, 포트)를 변경해주는 역할을 한다.

 

 

결국

사용자, 백엔드 서버, 프론트 서버는 서로 도메인이 달라도 소통할 수 있게 된다.

그렇게 사용자와 서버 간의 오가는 도메인은 하나의 도메인처럼 보이게 되고,

이를 통해 도메인이 달라 일어나는 CORS 문제도 발생하지 않는다.