경위

Vue.js의 프로젝트를 웹상에서 간편하게 만들 수 있는 jsfiddle로, Django Rest Framework(이하 DRF)로 작성한 api에 액세스하고 싶고, 시도했습니다.

이 기사에 쓰기

DRF에서 간단한 API 생성과 간단한 Vue.js 프로젝트 생성.

Vue.js에서 DRF의 api에 액세스하는 방법과 그 때의 유의점.

절차

DRF에서 api 만들기

Vue.js에서 DRF로 만든 api에 액세스

1. DRF로 api 만들기

환경 만들기

mkfir simple_drf
cd simple_drf
python3 -m vena venv
source venv/bin/activate

pip install django
pip install djangorestframework

django-admin startproject config.

-- モデル用のbook API作成用のapiv1 --
python manage.py startapp book
python manage.py startapp apiv1

book/models.py

from django.db import models
import uuid
from django.utils import timezone

# Create your models here.
class Book(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    title = models.CharField(verbose_name='タイトル', max_length=50)
    price = models.IntegerField(verbose_name='価格')
    created_at = models.DateTimeField(default=timezone.now)

    def __str__(self):
        return self.title

book/admin,py

from django.contrib import admin

# Register your models here.
from .models import Book


class BookModelAdmin(admin.ModelAdmin):  
    list_display = ('title', 'price', 'id', 'created_at')  
    ordering = ('-created_at',)  
    readonly_fields = ('id', 'created_at')  

admin.site.register(Book, BookModelAdmin) 

apiv1/serializers.py

from rest_framework import serializers  
from book.models import Book  

class BookSerializer(serializers.ModelSerializer):  
    class Meta:  
        model = Book  
        fields = ['id', 'title', 'price'] 

apiv1/views.py

from rest_framework import viewsets  
from rest_framework.permissions import IsAuthenticatedOrReadOnly  
from book.models import Book  
from .serializers import BookSerializer  

class BookViewSet(viewsets.ModelViewSet):  
    queryset = Book.objects.all()  
    serializer_class = BookSerializer 

apiv1/urls.py

from django.urls import path, include
from rest_framework import routers
from apiv1 import views

router = routers.DefaultRouter()
router.register('book', views.BookViewSet)

app_name = 'apiv1'
urlpatterns = [
    path('', include(router.urls))
]

config/urls,py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('apiv1/', include('apiv1.urls')),
]

관리 화면에서 적절하게 책을 추가했습니다.

2. Vue.js에서 DRF로 만든 api에 액세스

jsfiddle에 액세스하고 각 필드 (html, css, javascript)에 다음과 같이 기재.

HTML

<div id="app">
  {{ results }} 
  <hr>
  {{ results.id }} 
  <hr>
  {{ results.title }} 
  <hr>
  {{ results.price }} 
  <hr>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios를 cdn에서 사용할 수 있도록하십시오.

CSS는 적절하게

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted() {
    axios.get('http://127.0.0.1:8000/apiv1/book/d5da82ff-8f63-4718-9ddb-e989832170d1/')
    .then(response => {this.results = response.data})
 }
 },
)

라이프 사이클 후크의 mounted에서 api를 사용합니다.
axios의 get 메소드에 DRF로 만든 기사의 엔드포인트를 지정. 응답의 데이터를 결과 목록에 저장합니다.
HTML의 Mustache 구문에서 {{ results }} 등을 사용하기 때문에 가져온 결과가 표시되어야합니다 ...



표시됩니다.

오류

콘솔

fiddle.jshell.net/takuto/4vjsdpag/64/show/:1 Access to XMLHttpRequest at
'http://127.0.0.1:8000/apiv1/book/d5da82ff-8f63-4718-9ddb-e989832170d1/'
from origin 'https://fiddle.jshell.net' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to load resource: net::ERR_FAILED

표시되지 않습니다. 콘솔을 보면 위와 같이 오류가.
origin ' htps : // 푹 dぇ. j ぇ l. 네 t ' has been blocked by CORS policyhttps://fiddle.jshell.net 가 CORS 정책에 의해 차단되었다고 합니다.

원인은?

동일한 오리진 정책입니다.
세부사항: htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / cs / ue b / sekuri ty / same-origin_poucy

보안 관점에서 서로 다른 오리진 간에 리소스를 교환하는 것을 방지합니다.
오리진은 スキーム、ポート、ホスト의 세 가지 조합입니다.
이들이 일치하지 않으면 동일한 오리진이라고 할 수 없습니다.

오리진이란 : htps //w w. 아 t r t. 이. jp / ai t / archi c0s / 1311/26 / 네 ws007. HTML

달리 오리진에 대한 액세스를 허용하려면 CORS이라는 기능을 사용합니다. HTTP 헤더에 설정을 추가해야 합니다.

이번 에러가 일어나고 있는 이유는 DRF로 작성한 API의 오리진과 Jsfiddle의 오리진이 다르기 때문입니다.

DRF : htp://127.0.0.1:8000

Jsfiddle : htps : // 푹 dぇ. j ぇ l. 네 t

해결하기 위해...

DRF에서 django-cors-headers를 사용하여 CORS를 설정할 수 있습니다.

DRF에 django-cors-headers 넣기

설치

$ pip install django-cors-headers

DRF의 settings.py에 추가

settings.py

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ORIGIN_ALLOW_ALL 또는 CORS_ORIGIN_WHITELIST 설정

settings.py

CORS_ORIGIN_ALLOW_ALL = True

CORS_ORIGIN_WHITELIST = [
    "https://fiddle.jshell.net", 
]

CORS_ORIGIN_ALLOW_ALL은 다른 오리진을 모두 허용합니다.
CORS_ORIGIN_WHITELIST는, 허용하는 오리진 지정한다.

이제 다시 시도해 보세요.

했어. 睡眠が大事라는 책에 대한 정보를 얻을 수 있습니다.