html - zone-evergreen.js:2952 POST http://127.0.0.1:8000/api/users/ 404 (ไม่พบ)

ฉันเป็นมือใหม่ใน Angular และ Django ฉันกำลังพยายามสร้างเว็บไซต์ที่ใช้ Angular เป็นส่วนหน้าและ Django เป็นส่วนหลัง โดยที่ Angular ส่ง Object (ซึ่งประกอบด้วยชื่อ อีเมล และคำถาม) ไปยัง Django โดยใช้ DjangoRestFramework (การส่งข้อมูลจาก Angular ไปยัง Django)

ฟอร์มติดต่อ SS

กรอกคำอธิบายรูปภาพที่นี่

นี่คือไฟล์ Angular ของฉัน

contact.component.html:

       <form #userForm="ngForm" (ngSubmit)="onSubmit()">
                <div class="form-row">
                        <div class="col-sm">
                              <ul>
                                  <li>Contact No:</li> +91 8425007230 <br><br>
                                  <li>Email:</li>  [email  / [email 
                              </ul>
                        </div>
                        <div class="col-sm s1">
                            <input type="text" required #name="ngModel" [class.is-invalid]="name.invalid && name.touched" class="form-control" placeholder="Name" name="name" [(ngModel)]=userModel.username>
                            <small class="text text-danger" [class.d-none]="name.valid || name.untouched">Name is Required! <br> <br>
                            <input type="text" required #email="ngModel" [class.is-invalid]="name.invalid && email.touched" class="form-control" placeholder="Email" name="email" [(ngModel)]=userModel.email> <br> <br>
                            <small class="text text-danger" [class.d-none]="email.valid || email.untouched">Email is Required!
                        </div>
                        <div class="col-sm s1">
                            <textarea class="form-control" required #query="ngModel" [class.is-invalid]="query.invalid && query.touched" placeholder="Tell me your Query" style="height: 118px;" name="query" [(ngModel)]=userModel.last_name></textarea>
                            <small class="text text-danger" [class.d-none]="query.valid || query.untouched">Please Provide Query!
                        </div>
                </div>
                <button [disabled]="userForm.form.invalid" class="btn btn-primary" style="margin-left : 330px;">Send Message</button>
        </form> 

contact.component.ts:

import { Component, OnInit } from '@angular/core';
import { PostDataService } from '../post-data.service';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css'],
  providers:[PostDataService]
})
export class ContactComponent implements OnInit {

  userModel;
  constructor(private _dataPost: PostDataService) { }

  onSubmit(){
    this._dataPost.enroll(this.userModel)
    .subscribe(
      response => {
        alert("Data is Submitted")
      },
      error => alert("Error in submitting data"),
    );
  }

  ngOnInit() {
    this.userModel = {
      username : '',
      email: '',
      last_name: '',
    }
  }

}

post-data.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PostDataService {

  _url = 'http://127.0.0.1:8000/api/users/';
  constructor(private http: HttpClient) { }

  enroll(userData): Observable<any> {
    return this.http.post(this._url, userData)
  }
}

นี่คือไฟล์ Django ของฉัน

settings.py

here only necessary code I have posted

REST_FRAMEWORK = {
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 10
}

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
]

MIDDLEWARE = [
    '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',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

CORS_ORIGIN_WHITELIST = [
    "http://localhost:4200",
]

serializers.py

from django.contrib.auth.models import User
from rest_framework import serializers


class UserSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = User
        fields = ['id', 'username', 'email', 'last_name']

URLs.py (ไฟล์ URL หลัก)

From Django.contrib import admin
from Django.URLs import include a path
from rest_framework import routers
From sample.API import views

router = routers.DefaultRouter()
router.register(r'users', views.UserViewSet)

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api', include(router.urls)),
    path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

views.py

from django.contrib.auth.models import User
from rest_framework import viewsets

from sample.api.serializers import UserSerializer


class UserViewSet(viewsets.ModelViewSet):
    queryset = User.objects.all()
    serializer_class = UserSerializer