COMPARTILHAMENTO DE RECURSOS DE ORIGEM CRUZADA (CORS)
A última etapa é configurar o CORS.
O CORS exige que o servidor inclua cabeçalhos HTTP específicos que permitem ao navegador determinar se e quando as solicitações entre domínios devem ser permitidas.
O primeiro passo seria sair do servidor e instalar o cors-header.
(backend) $ pipenv install django-cors-headers
Em seguida, atualize o settings.py
Adicione corsheaders ao INSTALLED_APPS
# todo_api/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders', # new
'todos',
]
Adicione dois novos middlewares
# the first twos middleware are the new additional. Order matters
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # new
'django.middleware.common.CommonMiddleware', # new
'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',
]
Criar CORS_ORIGIN_WHITELIST
CORS_ORIGIN_WHITELIST = (
'localhost:3000/'
)
Agora executamos novamente o servidor
(backend) $ python manage.py runserver
Front-End – React Js
Agora chegamos à parte mais interessante. Buscando os dados da API para o Front end.
À medida que usamos o React, fiquei muito tentado a fazer com que a IU parecesse boa para este propósito de tutorial. Porém, como o tutorial foca na integração, eu faria o propósito de estilização bem no final (não no escopo deste tutorial). Vamos começar com o aplicativo create-react
npm install -g create-react-app
Certifique-se da estrutura de arquivos do aplicativo front-end
$ cd Project
$ create-react-app frontend
$ cd frontend
$ npm start
Você pode enfrentar um problema ao executar o comando npm start, normalmente, você será solicitado a adicionar o arquivo .env dentro do arquivo frontend, dentro do arquivo .env, basta escrever uma única linha de
SKIP_PREFLIGHT_CHECK=true
Depois de executar o npm start, esta página da web aparecerá em localhost:3000
YOU ARE READING
Django (Backend) + React (Fronend) Tutorial Básico
Non-FictionEste E-book irá introduzir você ao Fullstack no aspecto Básico, ensinando a como preparar e utilizar ferramentas em Django e React, usadas por diversas corporações ao redor do mundo, mas de forma mais simplificada e com um direcionamento diferente. ...
