[Vue] DRF / CORS

Jinga·2023년 5월 11일

Vue

목록 보기

9/13

Server&Client

Server

네트워크 상에서 클라이언트(사용자 또는 사용자의 프로그램)에게 서비스를 제공하는 컴퓨터 또는 프로그램을 뜻한다.

서버는 일반적으로 네트워크 상에서 클라이언트와 통신하기 위해 고유한 IP 주소를 가지며, 클라이언트는 IP 주소와 포트 번호를 이용해 서버에 접속한다.

예를 들면, 웹 서버는 사용자의 웹 브라우저로부터 요청을 받아 HTML, CSS, JavaScript 등으로 구성된 웹 페이지를 제공하고, 메일 서버는 사용자의 메일 클라이언트로부터 메일을 받아 사용자의 메일 박스에 저장하거나 다른 사용자에게 전달하는 역할을 한다.

서비스 전체를 제공 == Django Web Service

Django를 통해 전달받은 HTML에는 하나의 웹 페이지를 구성할 수 있는 모든 데이터가 포함되어있다.

즉, 서버에서 모든 내용을 렌더링하여 하나의 HTML 파일로 제공한다.

정보를 제공 == DRF API Service

Django를 통해 관리하는 정보만을 클라이언트에게 제공한다.

DRF를 사용하여 JSON으로 변환한다.

Client

Server가 제공하는 서비스에 적절한 요청을 통해 Serve로부터 반환 받은 응답을 사용자에게 표현하는 기능을 가진 프로그램 혹은 시스템을 뜻한다.

Server가 정의한 방식대로 요청 인자를 넘겨 요청하며, Serve는 정상적인 요청에 적합한 응답을 제공한다.

사용자의 요청에 적합한 data를 Server에 요청하여 응답 받은 결과로 적절한 화면을 구성한다.

Vue with DRF 준비

메인페이지 구성

제가 공부할 때 사용했던 파일을 기준으로 작성했습니다.

views/ArticleView.vue component 확인 및 route 등록

srt/App.vue router-link 주석 해제 및 결과 확인

components/ArticleList.vue 확인

전체 게시물을 표현 할 컴포넌트

화면 구성을 위한 최소한의 style포함

views/ArticleView.vue 주석 해제

ArticleList 하위 컴포넌트로 등록

1. 불러오기 / 2. 등록하기 / 3. 보여주기

components/ArticleListItem.vue확인

각 게시글들의 정보를 표현 할 컴포넌트

데이터 없이 최소한의 기본 구조만 확인

components/ArticleList.vue 주석해제

ArticleListItem 하위 컴포넌트로 등록

1. 불러오기 / 2. 등록하기 / 3. 보여주기

store/index.js 주석해제

화면 표현 체크용 더미데이터 생성

components/ArticleList.vue 코드 수정

components/ArticleListItem.vue 수정

내려 받은 prop 데이터로 화면 구성

AJAX요청 준비

axios 설정 : npm install axios

store/index.js에서 불러오기

요청 보낼 API server 도메인 변수에 담기

store/index.js getArticles 메서드 정의

getArticleView.vue의 actions(getArticles) 호출

인스턴스가 생성된 직후 요청을 보내기 위해 created() hook 사용

요청 결과 확인

Server에서는 200을 반환하였으나 Client Console에서는 Error를 확인

위와 같은 문제가 발생하는 원인

브라우저가 요청을 보내고 서버의 응답이 브라우저에 도착

Server의 log는 200(정상)을 반환

즉 Server는 정상적으로 응답했지만 브라우저가 막은 것이다.

보안상의 이유로 브라우저는 동일 출처 정책(SOP)에 의해 다른 출처의 리소스와 상호작용 하는 것을 제한 한다.

CORS

Cross-Origin Resource Sharing

Origin - 출처

URL의 Protocol. Host, Port를 모두 포함하여 출처라고 부르며, 이미지의 세 영역이 일치하는 경우에만 동일 출처로 인정한다.

Same Origin 예시

Cors- 교차 출처 리소스 공유

다른 출처에서 온 리소스를 공유하는 것에 대한 정책으로 Same Origin 해결

다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS headers를 포함한 응답을 반환해야한다.

CORS 설정하기

CORS 표준에 의해 추가된 HTTP Response Header를 통해 통제가 가능하다.

django-cors-headers library

응답에 CORS header를 추가해주는 라이브러리이다.

다른 출처에서 Django 애플리케이션에 대한 브라우저 내 요청을 허용한다.

라이브러리 사용하기

라이브러리 설치 및 requirements.txt 업데이트

App추가 및 MIDDLEWARE 추가

CORS_ALLOWED_ORIGINS에 교차 출처 자원 공유를 허용할 Domain 등록

Vue with DRF (CORS)

Article Read

응답받은 데이터 구조 확인

data Array에 각 게시글 객체

각 게시글 객체는 id, title, content로 구성되어있다.

store/index.js 수정

결과 확인

Article Create

views/Createview.vue 작성

router/index.js CreateView 불러오기

views/ArticleView.vue router-link 작성

게시글 생성 후, ArticleView로 이동 후 생성된 게시글 확인

ArticleView가 create될 때 마다 server에 게시글 전체 데이터를 요청하고 있기 때문에 router로 이동만 했는데도 게시글이 표시된다.

Article Detail

views/DetailView.vue 작성

router/index.js에 DetailView routes 작성

components/ArticleListItem.vue에 router-link 작성