2019-09-03 개발일지

오늘은 어제에 이어서 계속해서 로그인에 관련된 문제들을 점검했다.

 

우선 프론트팀에서 webpack dev server로 개발을 진행하고 있는데, vue-cli로 프로젝트를 생성하지 않고 직접 webpack.config 등 설정 파일들을 수기로 작성하여 사용하고 있었다.

 

여기서 개발 중 프론트 개발 서버에서 백엔드 개발 서버로 요청을 보내고 응답을 받았을 때 응답에 Set-Cookie 헤더 정보가 있어도 클라이언트 브라우저에서 쿠키를 생성하지 못하는 문제가 있었다.

 

해당 문제는 웹팩 설정에 대한 이해도가 깊지 않은 상태에서 개발을 하다보니 발생한 문제였다.

 

해결 방법은 다음과 같은데,

webpack dev server의 webpack config 설정 중 proxy 속성을 설정해야 한다.

이 속성은 API 서버가 로컬이 아닌 외부에 존재할 때(로컬에 존재하더라도 포트번호가 다를 경우도 포함된다.) 디폴트 API 통신 서버로 지정하는 옵션이다.

그래서 XMLHttpRequest나 fetch나 axios로 요청을 보낼 때 매번 전체 도메인 URL(http://blahblah:port/login)을 작성할 필요 없이 커맨드 URL(/login)만 작성하면 자동으로 전체 도메인 URL을 합쳐주는 기능을 한다.

 

webpack dev server의 프록시 설정을 해주니 백엔드 서버로부터의 응답에 Set-Cookie 헤더가 있을 경우 클라이언트에 쿠키가 생성이 가능해졌다.

 

webpack.config.js를 열어서 다음과 같이 내용을 작성 및 수정하면 된다.

const devWebpackConfig = merge(baseWebpackConfig, {
    devServer: {
        proxy: {
            '/': { // /로 시작하는 url은 아래의 전체 도메인을 추가하고, 옵션을 적용한다.
                target: 'http://192.0.0.0:4000', // External Backend API Server
                changeOrigin: true, // cross origin 허용 설정
            }, 
            '/otherServer/api': {
                target: 'http://211.0.0.0:3000',
                changeOrigin: true
            }
        }
    }
});

 

우리는 지금까지 서버단이 아닌 자바 스크립트 코드단에서 credentials과, full URL(http://192.0.0.0:4000/login) 같은 통신 옵션만 설정해줬을 뿐, 프론트 서버에 대한 설정을 해주지 않았던 것이 원인이었다.

근데 깊게 이해가 된게 아니라 무슨 차이인지 아직 잘 모르겠다.

 

중요한건 오랜 삽질을 통해서 vue-cli의 감사함을 느끼는 계기가 되었다.

 

 

참고: 

https://brightparagon.wordpress.com/2018/06/27/webpack-v4-development-configuration/

[webpack v4] Development 환경 구성하기

https://webpack.js.org/configuration/dev-server/#devserverproxy

DevServer | webpack