블로그 주소는 https://objective-blackwell-219591.netlify.app 입니다
현재 프로젝트의 기술 스택은 https://github.com/wnsdudSoftkim/Tech_Blog 에서 확인 할 수 있습니다.
Preview, Cors, CSRF Token 에러 , Axios 통신
Header , Body 인풋 데이터들이 data변수에 들어왔으면 이젠 Preview로 보이는 작업과 Django에 통신이 가는 작업을 해야합니다.
1. Preview
이전에 썼던 data 변수를 Preview 구간에서 보여주기만 하면 됩니다.
지금 다룰건 아니지만 LeftBlock 에 있는 CodeEditor은 실제 Body 데이터를 작성하는 구간이고 RightBlock은 Preview 구간입니다. 또한 지금 다루는건 아니지만 useSelector을 통해 data를 받고 그 데이터를 실시간으로 보여주고 있죠.
2. Cors 에러 , CSRF 토큰 에러, Axios 통신
이제 데이터를 보낼 준비가 됬으니 . 저장 버튼이 눌리면 서버로 데이터가 가는 작업을 해야 됩니다. 첫번째로 프론트단에서 통신 라이브러리를 써줍니다. 저는 Axios를 통해 통신 작업을 했습니다.
Django 서버와 React 서버를 동시에 구동해보면 보통 django는 8000 포트에서 동작을 하고 React는 3000 포트에서 동작을 합니다. 여기서 프론트에서 서버로 통신을 보낸다는 의미는 3000에서 8000에 GET POST 등 요청을 보낸다는 의미입니다.
일단 Axios를 통해 막무가내로 보내보면
axios.post('http://localhost:8000',{
title:data.titledata,
body:data.bodydata,
thumbnail:data.thumbnail,
}).then(function(response){
console.log(response)
}이런식으로 보내게 되겠죠? 여기서 첫번째 에러가 발생합니다. Cors 에러입니다. Cors에러 해결방법은 여러가지가 있는데 저는 http-proxy-middleware을 사용했습니다 먼저 src단에 setupProxy.js 라는 파일을 생성합니다.
npm i http-proxy-middleware
const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
createProxyMiddleware('/Post',{
target:'http://localhost:8000',
changeOrigin:true
})
)
}여기까지 하셨으면 성공적으로 localhost:8000와 내가 원하는 localhost:3000/Post 가 연결 된겁니다. 내가 서버측 url인 localhost:8000/Post로 Get 요청 혹은 Post 요청을 보내면 localhost:3000/Post로 요청이 보내지는 겁니다. Proxy는 이런 역활을 합니다. 그 다음 두번 째 에러가 발생합니다. Django 에서 기본적으로 가지고 있는 방패인 CSRF 토큰 인증입니다. 우리는 서버에 통신을 보내는데 django는 인증되지 않은 사용자를 막고 있는 겁니다. 그걸 해제해 주어야 합니다. 본래라면 인증을 하는 방식으로 작업 해야 하지만, 이 사이트는 회원가입 기능도 없으니 개인정보 누출 위험도 없겠죠? 그러니 해제해 줍니다. 여기서 부터 Django 코드입니다. 저번엔 django Project를 만들었다면 이번엔 app을 만들어 주어야 합니다. django 는 하나의 프로젝트 안에 많은 app 들이 있는 구조 입니다. 그 앱들을 다른 기능에 동작하게 짜면 작업하기 수월하겠죠.
Django-admin startapp [앱 이름]
그 다음 setting.py가 있는 폴더에 urls.py 에서 내가 만든 앱과 url 연동 시켜줍니다.
from django.contrib import admin
from django.urls import path,include
from main.views import *
urlpatterns = [
path('Post/',include('post.urls')),
]또한 settings.py 에 AllowPost
ALLOWED_HOSTS = ['*']
그다음
Installed_App 에 현재 앱의 이름을 포함시켜줍니다.
Django의 Views.py, Model 은 작성이 되어있다 가정하고
from django.views.decorators.csrf import csrf_exempt
from django.utils.decorators import method_decorator
@method_decorator(csrf_exempt,name='dispatch')
def PostBook(request):
if request.method =="GET":
elif request.method =="POST":
이런식으로 csrf의 토큰을 해제해주시면 통신이 되는 걸 확인 할 수 있습니다.
