Nginx Forward Proxy로 CORS 해결하기

React Project를 배포하는 과정에서 CORS 에러를 직면했다

문제는 서버가 서비스 중인 상태라 손대기도 쉽지 않고 야근은 사절이라
간단하게 서버에 설정하는 대신 Proxy 기능을 지원하는 웹서버인
Nginx에 프로젝트를 올리기로 결정했다

Nginx Windows OS 기준

개발 중에 사용하던 http-proxy-middleware와 크게 다르지 않다
Windows OS 기준으로 설명하지만 설치 방법을 제외하고는 다르지 않을것으로 보인다

1. Windows OS용 Nginx 설치

2. 설치된 폴더 안에 있는 nginx.conf 파일 설정

// Sample
http {
    server {
        listen 3000; // Front Port
    
        location / { 
            /* root와 인덱스 파일 설정 */
        }
   
        /* 슬래시주의! */
        location /api/ {
            proxy_pass http://backend;
        }
    }
} 

위와 같이 설정해 주면 되는데 api의 슬래시를 꼭 신경써서 작성해야한다
404 에러가 난다면 슬래시가 제대로 되어있나 확인해볼것

404 에러 참고

proxy_pass 주소 맨뒤에 슬래시가 들어가면 /api/ 경로는 생략된다
만약 /api/abc 으로 요청을 보내면 http://backend/abc 로 들어가게 되는 것

더 자세한 명령어는 proxy_pass 공식 문서에서 확인하자

proxy_pass의 url을 request에 담아 보내고 싶다면?

proxy는 설정했지만 backend 서버의 url이 바뀔 수 있는 상황이라
매번 nginx.conf 파일의 url을 직접 넣는 대신 유동적으로 설정하고 싶어졌다.

요청 시의 url을 읽는 방법도 있긴 한것 같은데 몇번 해보다 포기하고
header에 담아 보낼 수 있는 방법이 기술된 블로그를 발견해 이 방법으로 결정

NGINX, 다이나믹 리버스 프록시 셋업하기

// Sample
http {
    server {
        listen 3000; // Front Port
    
        location / { 
            /* root와 인덱스 파일 설정 */
        }
   
        /* 슬래시주의! */
        location /api/ {
            proxy_pass $http_x_target_base_endpoint;
            proxy_pass_request_headers on;
        }
    }
} 

nginx.conf 파일의 api 부분에 proxy_pass url 대신 아래의 두줄을 추가
proxy_pass $http_x_target_base_endpoint;
proxy_pass_request_headers on;

이제 요청을 보낼 때 header에 x-target-base-endpoint에
proxy_pass로 설정할 url을 담아 보내면 된다!

Example

Front End Request

axios({
      method: 'post',
      url: '/api/abc', // 앞에 url을 생략한다
      headers: {
          x-target-base-endpoint: 'http://backend'
      }
  });

nginx.conf

http {
    server {
        listen 3000; // Front Port
        server_name localhost;
    
        location / { 
            /* root와 인덱스 파일 설정 */
        }
   
        location /api/ {
            proxy_set_header Host $host; // 없어도 문제 없어 보임
            proxy_pass $http_x_target_base_endpoint;
            proxy_pass_request_headers on;
        }
    }
} 

위 처럼 요청을 보내게 되면 http://backend/api/abc로
요청이 가게 되어 CORS 에러가 나지 않을 것이다

이제 header에 넣을 url을 config 파일로 빼서
하나의 설정 파일에서 유동적으로 url 관리가 가능하다!