Почему я получаю ошибку 403 при отправке post-запроса с использованием axios в моем react-файле? И как мне написать страницу регистрации с нуля?

Я пытаюсь создать страницу регистрации в моем проекте django. У меня есть два приложения с названиями "api" и "frontend". Я не уверен, что делаю все правильно, но моя основная идея состоит в том, чтобы иметь форму регистрации в http://127.0.0.1:8000/sign-up, чтобы, когда пользователь нажимает кнопку отправки, он отправлял запрос на почту, и мой класс CreateUserView в api/views.py получал его, и новый пользователь был зарегистрирован.

frontend/urls.py:

from django.urls import path
from .views import index
from api.views import RegisterView

urlpatterns = [
    path('sign-up', index),
    path('register', RegisterView.main),
]

frontend/views.py:

from django.shortcuts import render

def index(request, *args, **kwargs):
    return render(request, 'frontend/index.html')

frontend/src/components/App.js:

import SignUp from "./SignUp";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { render } from "react-dom";

function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="/sign-up" element={<SignUp />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;
const appDiv = document.getElementById("app");
render(<App />, appDiv);

frontend/src/components/SignUp.js:

import React, { Component, Fragment, useState } from "react";
import axios from "axios";

function SignUp() {
    const [gmailAdress, setGmailAdress] = useState("");
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    return(
        <Fragment>
            <div>
                <button onClick={() =>
                  axios.post("/sign-up", {
                      method: "POST",
                      headers: { "Content-Type": "application/json" },
                      body: JSON.stringify({
                        gmail_adress: gmailAdress,
                        username: username,
                        password: password,
                      }),
                    })
                    .then((response) => console.log(response))
                    .catch((error) => console.log(error))
                }
                >
                </button>
            </div>
        </Fragment>
    )

api/models.py:

from django.db import models

#generate_unique_user_id is defined

class User(models.Model):
    host = models.CharField(max_length=50, unique=True, null=True)
    user_id = models.CharField(max_length=12, default=generate_unique_user_id, unique=True) 
    gmail_adress = models.CharField(max_length=288, unique=True)
    username = models.CharField(max_length=50, unique=True)
    password = models.CharField(max_length=288)
    created_at = models.DateTimeField(auto_now_add=True)

api/serializers.py:

from rest_framework import serializers
from .models import User


class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id', 'host', 'user_id', 'gmail_adress', 'username', 'password', 'created_at')
        
class CreateUserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('host', 'gmail_adress', 'username', 'password')

api/views.py:

from django.shortcuts import render
from rest_framework import generics, status
from .serializers import UserSerializer, CreateUserSerializer
from .models import User
from frontend.views import frontend_index_function
from rest_framework.views import APIView
from rest_framework.response import Response


class RegisterView(generics.ListAPIView):
    queryset = User.objects.all()
    serializer_class = UserSerializer
    def main(request):
        pass
        
    
class CreateUserView(APIView):  
    serializer_class = CreateUserSerializer

    def post(self, request, format=None):
        if not self.request.session.exists(self.request.session.session_key):
            self.request.session.create()
        
        serializer = self.serializer_class(data=request.data)
        if serializer.is_valid():
            host = self.request.session.session_key
            gmail_adress = serializer.data.get('gmail_adress')
            username = serializer.data.get('username')
            password = serializer.data.get('password')

            user = User(host=host, gmail_adress=gmail_adress,username=username, password=password)
            user.save()
            
            return Response(UserSerializer(user).data, status=status.HTTP_201_CREATED)

Я хотел отправить запрос на почту, содержащий информацию о пользователе (адрес gmail, имя пользователя и пароль) в "/sign-up", а затем я не знаю, как сказать api/views.py, чтобы он обновил мою базу данных. Я пытался href register при нажатии кнопки submit, чтобы frontend/urls.py как-то привел к CreateUserView, но у меня ничего не получилось. При нажатии на кнопку "Зарегистрироваться" я получаю следующую ошибку:

AxiosError {message: 'Request failed with status code 403', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

Я буду благодарен, если кто-нибудь сможет мне помочь, потому что я действительно запутался, что именно я должен сделать, так как я хотел сделать это без использования стандартных юзерских вещей Django. Большое спасибо!

Вернуться на верх