Неверный запрос /api/учетные записи/регистрация/ HTTP/1.1" 400 50

Я новичок в ReactJS и Django REST Framework. Я пытаюсь подключить регистрационную форму внешнего интерфейса к серверному API, но безуспешно; я продолжаю получать сообщение об ошибке "POST /api/accounts/register/ HTTP/1.1" 400 50". Ниже приведены коды: конечные точки:

from django.urls import path

из файла .views импортируются RegisterView, LoginView, AuditLogView

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

URL-адреса приложений:

urlpatterns = [
    path('register/', RegisterView.as_view(), name='register'),
    path('login/', LoginView.as_view(), name='login'),
    path('audit-logs/', AuditLogView.as_view(), name='audit-logs'),
]

Со стороны интерфейса ReactJS я обеспечиваю подключение к серверной части с помощью axios следующим образом:

    import axios from "axios";
    
    const API = axios.create({
      baseURL: "http://localhost:8000/api/accounts/", // Change this to match your Django backend
    });
    
    // Register a new user
    export const registerUser = (userData) => API.post("register/", userData);
    
    // Login and receive token
    export const loginUser = (credentials) => API.post("login/", credentials);
    
    // Get audit logs (SUPERUSER only)
    export const getAuditLogs = (token) =>
      API.get("audit-logs/", {
        headers: { Authorization: `Token ${token}` },
      });
    
    // Get user profile (optional if endpoint exists on your backend)
    export const getUserProfile = (token) =>
      API.get("profile/", {
        headers: { Authorization: `Token ${token}` },
      });
    
    // Logout (optional if you implement token blacklist on server)
    export const logoutUser = (token) =>
      API.post(
        "logout/",
        {},
        {
          headers: { Authorization: `Token ${token}` },
        }
      );
to use on the following registration form:
import { useState } from "react";
import { registerUser } from "../api/api";

export default function RegisterForm() {
  const [formData, setFormData] = useState({
    email: "",
    first_name: "",
    last_name: "",
    password: "",
    role: "STAFF",
  });
  const [loading, setLoading] = useState(false);

  const handleChange = (e) =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      await registerUser(formData);
      alert("User registered!");
    } catch (err) {
      alert("Failed to register.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="card p-4 mx-auto"
      style={{ maxWidth: 500 }}
    >
      <h2 className="mb-4">Register</h2>
      {["email", "first_name", "last_name", "password"].map((field) => (
        <input
          key={field}
          className="form-control mb-3"
          type={field === "password" ? "password" : "text"}
          name={field}
          placeholder={field.replace("_", " ")}
          onChange={handleChange}
        />
      ))}
      <select className="form-select mb-3" name="role" onChange={handleChange}>
        <option value="STAFF">Staff</option>
        <option value="EXAM_OFFICER">Exam Officer</option>
        <option value="DEPT_HEAD">Department Head</option>
        <option value="DEAN">Dean</option>
        <option value="VC">Vice Chancellor</option>
      </select>
      <button className="btn btn-primary" disabled={loading}>
        {loading ? "Registering..." : "Register"}
      </button>
    </form>
  );
}

Однако я продолжал получать сообщения "Неверный запрос: /api/accounts/register/", "POST /api/accounts/register/ HTTP/1.1" 400 50". Я буду рад, если кто-нибудь мне поможет. Спасибо».

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