[Dúvida] Django Rest Framework | Python web

Oi, Edivan! Tudo bem?

Realizar a conexão do Front-end com um Back-end apresenta algumas diferenças dependendo de qual tecnologia ou Framework você está utilizando no Front-end, mas, para o Back-end, o que você precisa fazer é permitir que a API se comunique com outros endereços de servidor, você faz isso através da configuração de CORS.

Enfim, para entender como você pode fazer essa conexão, mostrarei um exemplo bem simples, onde ativo as configurações de CORS no Back-end e utilizo o método fetch para interceptar uma rota do Back-end no Front-end.

Configure o CORS: Para permitir que o front-end se comunique com o back-end, você precisa configurar o CORS (Cross-Origin Resource Sharing). Instale o pacote django-cors-headers:

pip install django-cors-headers

E adicione as configurações no seu settings.py:

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

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

CORS_ORIGIN_ALLOW_ALL = True  # Permite todas as origens (não recomendado para produção)

Conecte o front-end: Agora, do lado do front-end, você pode usar JavaScript para fazer uma requisição à API. Vou usar o fetch como exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Front-end</title>
</head>
<body>
    <h1>Conectando ao Back-end</h1>
    <div id="message"></div>

    <script>
        fetch('http://localhost:8000/hello/')
            .then(response => response.json())
            .then(data => {
                document.getElementById('message').innerText = data.message;
            })
            .catch(error => console.error('Erro:', error));
    </script>
</body>
</html>

Certifique-se de que o servidor Django está rodando (python manage.py runserver) e que o front-end está sendo servido de algum lugar (pode ser um simples servidor HTTP local).

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.