Nginx conf 인증 헤더 설정(feat. React Axios)

1. 클라이언트 설정 (React + Axios)

Axios 인스턴스 설정

const apiClient = axios.create({
  baseURL: '/api',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 요청 인터셉터를 통한 헤더 설정
apiClient.interceptors.request.use(
  (config) => {
    const accessToken = localStorage.getItem('accessToken');
    const refreshToken = localStorage.getItem('refreshToken');
    
    if (accessToken) {
      config.headers['Authorization'] = `Bearer ${accessToken}`;
    }
    if (refreshToken) {
      config.headers['Refresh-Token'] = refreshToken;
    }
    
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

개별 요청 시 헤더 설정

const getData = async () => {
  try {
    const response = await apiClient.get('/users', {
      headers: {
        'Authorization': `Bearer ${accessToken}`,
        'Refresh-Token': refreshToken,
        'Custom-Header': 'customValue'
      }
    });
    // 응답 처리
  } catch (error) {
    // 에러 처리
  }
};

2. Nginx 프록시 헤더 설정

기본 설정

location /api/ {
    proxy_pass http://localhost:8080/;
    
    # 인증 관련 헤더 설정
    proxy_set_header Authorization $http_authorization;
    proxy_set_header Refresh-Token $http_refresh_token;
    proxy_set_header Custom-Header $http_custom_header;
    
    # 기본 프록시 헤더
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

3. 헤더 명명 규칙

Nginx의 헤더 변수 변환 규칙

1. 모든 문자는 소문자로 변환됨
2. 하이픈(-)은 언더스코어(_)로 변환됨
3. 앞에 $http_ 접두어가 붙음

헤더 변환 예시

클라이언트 헤더 이름	Nginx 변수
Authorization	$http_authorization
Refresh-Token	$http_refresh_token
Custom-Header	$http_custom_header

4. 주의사항

1. 커스텀 헤더 전달
   • 클라이언트에서 사용하는 모든 커스텀 헤더는 Nginx에서도 명시적으로 설정해야 함
   • 설정하지 않은 헤더는 백엔드로 전달되지 않음
2. 보안 고려사항
   • 토큰은 안전한 저장소(HttpOnly 쿠키 등)에 저장
   • HTTPS 사용 권장
   • 토큰 만료 및 갱신 로직 구현 필요
3. 헤더 이름 주의
   • Nginx 설정에서 proxy_set_header 뒤의 헤더 이름은 원래 형식 유지
   • 변수명($http_xxx)은 Nginx 명명 규칙 따라야 함
4. 디버깅
   • 헤더가 전달되지 않는 경우 Nginx 로그 확인
   • 클라이언트 요청 헤더와 백엔드 수신 헤더 비교 확인