Cross Origin 허용하기

Node.js + Express + Vue.js + Webpack을 이용해 토이 프로젝트를 만들고 있다가 axios를 통해 HTTP 프로토콜로 비동기 통신 기능을 만들던 중 Cross Origin 차단 문제를 접했다.

 

Spring Boot로 현업을 뛰고 있는 상황이라 @CrossOrigin 어노테이션 하나만 붙이면 한방에 해결이 되는데 Node.js로는 CrossOrigin 설정을 해본적이 없어서 자료를 찾아봐 공부해봤다.

 

문제

---

우선 상황은 다음과 같다.

 

Node 서버는 3000번 포트를 사용, Vue 개발 서버는 3001 포트를 사용하는 환경이다.

각각의 서버에서 통신을 주고받아야하니 Cross Origin에 위배되는 상황이 발생했다.

버거 메뉴를 등록하는 화면이다. 입력한 내용을 기반으로 MongoDB 도큐먼트에 데이터를 추가한다.

 

버거 메뉴를 등록하는 폼에서 내용을 입력하고 등록버튼을 클릭하면 Node.js 서버로 통신을 보낸다.

코드는 다음과 같다.

전역 $http에 axios를 할당해서 사용하고 있다.

post 통신으로 입력한 정보들을 담아서 서버에 보낸다.

 

 

서버로 통신을 보내면 CrossOrigin 정책에 위배된다는 에러가 발생한다.

그럼 개발자 도구에서 CrossOrigin 정책에 위반했다는 에러가 찍힌다.

 

 

 

해결방안

---

CrossOrigin 정책은 자바든 자바스크립트든 클라이언트와 서버간에 통신에 헤더 정보를 작성하여 통신하면 우회할 수 있다.

 

Spring Boot에는 @CrossOrigin이라는 어노테이션이 존재한다.

해당 어노테이션 하나를 선언하는 것만으로 컨트롤러내의 모든 통신 라우트들의 헤더 정보를 자동으로 작성해준다.

 

Node.js의 경우에도 개발자가 직접 하나하나 타이핑 설정할 필요 없이 Express 프레임워크에서 미들웨어를 제공해준다.

Express의 CORS 미들웨어다.

 

해당 미들웨어 패키지를 NPM으로 설치하자.

NPM으로 설치한 CORS 모듈을 require()함수로 로드한다.

 

로드한 CORS 모듈을 Express의 use()를 이용해 사용 설정한다.

 

 

이제 다시 클라이언트에서 서버로 통신을 보내면 서버에서 통신을 받아 비즈니스 로직을 처리할 수 있게 된다.