Django CORS 설정과 API 연동

API 서버를 만들때 가장 염려스러운 부분은 Cross Domain 이슈다. 그도 그럴게 Ajax 통신(Asynchronous Javascript XML)을 통한 데이터 송수신에서 대부분 발생하는 이슈는 Cross Domain 이슈라서 그렇다. 이 부분을 해결하기 위해서는 서버사이드 내에 Cross Domain을 허용하기 위한 처리가 되어있지 않으면 통신자체가 원천적으로 봉쇄되기 때문이다.

악성코드를 막기위한 브라우저의 AT필드!!

예를 들어 지난번에 우리가 만든 API 중에서 게시판 타입 목록을 가져오는 API를 연동해보겠다. Angular.js 프로젝트를 이용해서 코드를 대충 작성해보면 아래와 같다.(Angular.js 프로젝트 만드는 법을 모를땐 여기를 클릭해라) 

app.module.ts

app.component.ts URL 입력할때 끝부분에 /(Slash)를 잊지말자.

이렇게 작성한 뒤에 django 서버를 기동하고 angular도 ng start 명령을 통해 실행시키자. 그리고 브라우저를 열어서 localhost:4200 으로 접속하자. 그리고 개발자 도구를 열어서 보면 짜잔.

에러가 뙇! 등장해있는걸 확인 할 수 있다. 저 "No Access-Control-Allow-Origin' 관련한 오류가 바로 Cross Domain 이슈가 되시겠다. 가끔 "둘 다 localhost 인데 도메인 같은거 아닌가여?" 하고 질문하시는 분들 계신다. Port 번호 다르면 다른 서버로 인식하기때문에 Cross Domain 에러가 발생한다.

그래서 일단은 Django에 Cors관련 라이브러리를 추가하도록 하자.

requirements 에 있는 base.txt 파일을 열어 아래와 같이 라이브러리를 추가한다.

이렇게 작성한 뒤에 작업실행에서 Initialize For Local 을 실행해 django-cors-headers 라이브러리를 내려 받자.

그리고 프로젝트 폴더 아래에 있는 settings/local.py 파일을 열어 아래와 같이 내용을 추가한다.

직접 키보드를 타이핑하기 싫은 중생을 위해 내가 다시 써주면

CORS_ORIGIN_ALLOW_ALL = True   CORS_ALLOW_CREDENTIALS = True

이렇게 설정을 추가 하면 된다. 물론 이건 로컬 개발환경 설정이니까 모든 요청을 수락한 거지만 배포용 설정은 아래와 같이 내용을 추가하면 되겠다.

settings/production.py

조금 더 자세한 설정방법을 알고 싶다면 여기를 클릭하면 되겠다.

그리고 마지막으로 settings/base.py 파일을 열어서 INSTALLED_APPS 항목에 'corsheaders'를 추가한다.

그리고 MIDDLEWARE 쪽에도 'corsheaders.middleware.CorsMiddleware' 를 추가한다.

일단 로컬 개발환경이니까 모든 접속을 허용한 상태다. 한번 아까 에러가 났던 관리자 도구에서 F5키를 눌러 새로고침을 해보자.

이렇게 정상적으로 데이터를 가져오는 것을 확인할 수 있다.

이걸 화면에 표시하려면 아래와 같이 코드를 수정하자.

app.component.ts

app.component.html

app.component.css

이렇게 서로 다른 도메인에 대한 API 통신이 가능하게 되었다.

이제 다음시간부터는 작성, 수정, 삭제에 대한 API 연동을 하게 될거다.

물론 그 다음엔 검색을 위한 필터링, 페이징과 같은 기능을 구현하는 방법을 함께 알아보는 시간을 갖을 계획이다.

그러면 오늘은 여기까지.