Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 6 (프론트 axios, cors 설정)

안녕하세요.

 

이전 포스팅 때 화면을 구현하였습니다. 이번에는 프로젝트 초기에 만들어두었던 DRF Server에 Todo API 를 이용하여 실제 데이터를 백엔드 서버에 넘겨 CRUD 를 할 수 있도록 만들어보겠습니다.

 

백엔드 서버와 통신하기 위해서는 HTTP 통신이 필요한데 저희는 axios 라는 것을 사용하여 통신을 해보도록 하겠습니다.

 

axios 설치

npm install axios

axios 사용법

import axios from 'axios';


var url = 'https:/jsonplaceholder.typicode.com/users';
var data = {
    username: this.username,
    password: this.password
}
axios.post(url, data);
// 성공
.then(function(response) {
    console.log(response);
})
// 실패
.catch(function(response) {
    console.log(response);
})

[axios 설치 후 yarn serve 시 발생하는 에러]

어제 설치하고 오늘 일어나서 해보려고하니 package.json 에서 dependency 오류가 발생하더라구요.

해결하는 방법은 링크를 올려두었습니다.

https://avaiable.tistory.com/140

 

간단하게 사용법에 대해 알아봤습니다. 이제 우리가 만든 Django 서버 프로젝트에 가서 서버를 실행시켜주겠습니다.

python manage.py runserver  // localhost:8000

이제 axios 의 url 부분을 수정해주면 되겠죠?

import axios from 'axios';


let url = 'http://localhost:8000/api/todo'
axios.get(url)
.then(function(response){
  console.log(response);
})
.catch(function(response){
  console.log(response);
})

처음에는 GET 으로 전에 실습하면서 만들어봤던 데이터들을 가져오보도록 하겠습니다.

로그를 찍어두었으니 로그가 콘솔창에 보일 것 입니다.

CORS

보시면 요청이 제대로 안갔다는 것이고 CORS policy 라는 것에 막혔다고 합니다.

CORS 에 대한 자료는 구글링해보면 전문적인 자료가 많이 나오기 때문에 이 포스팅에서는 간단히 설명하고,

 

Cross-Origin Resource Sharing (CORS)는 추가 HTTP 헤더를 사용하여 브라우저가 한 출처에서 실행중인 웹 애플리케이션에 선택된 액세스 권한을 부여하도록 하는 메커니즘입니다. 즉 서로 다른 서버에서 리소스를 요청 혹은 교환할 때 발생한다고 보면 됩니다.

 

해결하는 방법에 대해 알아보도록 하겠습니다.

 

Django cors 설치

pip install django-cors-headers

settings.py 설정

# config/settings.py

INSTALLED_APPS = [
	'corsheaders',
]


MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 가급적 맨 위에 위치하게 끔 추가
# CorsMiddleware should be placed as high as possible, especially before any middleware that can generate responses such as Django’s CommonMiddleware or Whitenoise’s WhiteNoiseMiddleware. If it is not before, it will not be able to add the CORS headers to these responses.
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
    'http://localhost:8081',  # vue.js port 번호를 입력해주시면 됩니다.
    'http://127.0.0.1:8081'
)

좋습니다, 이제 다시 프론트로 넘어가서 웹 페이지 캐쉬삭제 새로고침을 진행 한 뒤 (cmd + shift + R)

콘솔창을 열어보면 데이터가 제대로 넘어온 것을 확인할 수 있습니다.

Success

data 에 Backend 에서 해당 uri(api/todo) 로 요청하면 얻을 수 있는 data 가 있고,

status, statusText는 해당 요청이 성공적으로 실행되었다면 2xx 번 대 코드를 실패되었다면 4xx 번 대 코드를 리턴합니다.

 

좋습니다. 오늘 포스팅은 여기서 마무리하도록하겠습니다.

다음 포스팅은 데이터를 가져오고, 삭제하고, 저장시키고, 업데이트 시키는 CRUD 기능 구현을 해보도록 하겠습니다.

 

Reference

- Cors란 https://kkan0615.github.io/youngjin.github.io/Cors/

- Django Cors 설정 https://blog.thereis.xyz/41