주요 내용으로 건너뛰기

CORS 이슈와 proxy 설정

angular-cli 사용자 + webpack 사용자

Api를 가져다 쓰다보면 cors 문제를 겪을 때가 있다.


이는 처음 서브되는 리소스의 도메인과 다른 도메인의 리소스가 요청될 때 cross origin http 요청에 의해 수행되기 때문이다. 


CORS는 보안 상의 이유로 인증절차를 거치지 않으면 허용되지 않도록 많은 브라우저에서 세팅되어 있는데, 간단히 로컬호스트를 사용하는 앱을 만들다보면 어쩔 수 없이 cors 요청을 해야할 때가 있다.


그럴 때는 cors 모듈을 이용할 수 있다.


사용법은 아래와 같다.



별도로 corsOption 객체를 넘겨줄 수도 있지만 그러지 않아도 충분하다.


다음은 proxy 설정을 담은 proxy.conf.json 파일을 만들 차례다.

위와 같이 키에 라우트 값을 주고 target은 노드 서버의 주소(3000번 포트), http 요청이므로

secure는 false, log는 debug 수준으로 설정한다.


이제 package.json의 스크립트로 가서


"start": "ng serve --proxy-config proxy.conf.json".


이렇게 설정해주면 기존의 "http://localhost:3000/auth/abc"는 

프론트 엔드의 포트 + 라우트로 연결된다.


이제 자유롭게 가져다 쓰면 된다!!


아래는 위 내용을 좀 더 상세하게 설명해 놓은 동영상 사이트


https://juristr.com/blog/2016/11/configure-proxy-api-angular-cli/


이준형 님의 창작활동을 응원하고 싶으세요?

댓글

SNS 계정으로 간편하게 로그인하고 댓글을 남겨주세요.