Webpack DevServer에서 302 Error 해결: allowedHosts 옵션의 역할

문제 상황

Webpack 4.0의 devServer를 사용하여 로컬 개발 환경에서 프록시를 설정하고 외부 API(예: https://alpha.com)를 호출하려 할 때, 302 Redirect Error가 발생하는 문제가 있었습니다.

Webpack DevServer 설정

configs.devServer = {
    host: '0.0.0.0',
    port: 3000,
    hot: true,
    historyApiFallback: true,
    allowedHosts: ['all'],
    proxy: {
      '/api': {
        target: 'https://alpha.com',
        changeOrigin: true,
        secure: false,
        headers: {
          Cookie: 'cid=123'
        }
      }
    }
}

이 설정을 적용하기 전에는 API 요청 시 302 에러가 발생하여 정상적으로 데이터를 가져올 수 없었습니다. 하지만 allowedHosts: ['all'] 옵션을 추가한 후 문제없이 API 호출이 이루어졌습니다.

allowedHosts 옵션이 해결책이 된 이유

Webpack DevServer의 allowedHosts란?

allowedHosts는 Webpack DevServer의 보안 정책(CORS, Same-Origin Policy)과 관련된 설정입니다.

기본적으로 Webpack DevServer는 Host Header 검사를 수행하여, 예상하지 못한 도메인에서 접근하는 것을 방지합니다. 예를 들어, localhost:3000에서 실행 중인데 alpha.com의 API를 호출하면 Webpack DevServer가 이를 차단할 수 있습니다.

allowedHosts의 동작 방식

• 기본값: undefined

  • Webpack DevServer는 localhost 또는 127.0.0.1 같은 기본적인 호스트에서만 요청을 허용합니다.

• 특정 도메인을 허용하는 경우:

  allowedHosts: ['alpha.com', 'beta.com']

  • alpha.com, beta.com에서의 요청만 허용합니다.

• 모든 호스트를 허용하는 경우:

  allowedHosts: ['all']

  • 어떠한 도메인에서 접근하더라도 요청을 허용합니다.

302 Redirect 오류의 원인

302 오류는 리디렉션 발생을 의미하며, 여러 원인이 있을 수 있지만 이번 경우에는 Webpack DevServer가 Host Header를 검증하는 과정에서 문제가 발생한 것으로 보입니다.

• allowedHosts가 설정되지 않으면 Webpack DevServer가 Host Header를 검사하고, 프록시 요청을 정상적으로 처리하지 못할 수 있습니다.
• 이때, 브라우저가 302 Redirect를 수행하여 다른 경로로 리디렉션하거나 요청을 차단할 수 있습니다.

allowedHosts: ['all']을 설정하면 Webpack DevServer가 모든 도메인을 신뢰하도록 설정되므로, 프록시 요청이 정상적으로 이루어지고 API 호출이 성공하게 됩니다.

쿠키 설정 방법

Alpha 서버에 정상적으로 로그인한 후, 개발자 도구(F12)를 열고 네트워크 탭에서 요청에 포함된 Cookie 값을 확인합니다. 해당 쿠키 값을 복사한 후, Webpack DevServer의 프록시 설정에서 headers 옵션에 추가하면 됩니다.

예를 들어, cid=12345라는 쿠키 값이 있다면 다음과 같이 설정할 수 있습니다:

headers: {
  Cookie: 'cid=12345'
}

이 방법을 사용하면 Webpack DevServer의 프록시를 통해 Alpha 서버에 인증된 상태로 API를 요청할 수 있습니다.

결론

Webpack DevServer에서 외부 API 호출 시 302 Redirect Error가 발생한다면 allowedHosts: ['all'] 설정을 추가하여 문제를 해결할 수 있습니다. 하지만, 보안상 위험할 수 있으므로 로컬환경에서 개발 및 테스트를 하는 경우에만 사용하는 것이 좋습니다.