Я получаю csrftoken в cookie и не могу отправить в ответ make post, delete и put запрос от angular13 к Django rest framework

Мне нужно сделать запрос на удаление на сервер (django) от клиента (angular13) с аутентификацией сессии, и я также получаю идентификатор сессии и токен csrf в cookie, но не могу сделать запрос, я получаю csrftoken missing в консоли.

спасибо

//component.ts

deleteStory(id : string){
    console.log(id)
    this.storyapiService.deleteStory(id).subscribe();
    }

//service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { story } from './story';
import { Observable,  of  } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import {CookieService} from 'ngx-cookie-service';



const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    cookieName: 'csrftoken',
    headerName: 'HTTP_X_CSRFTOKEN',
//     'X-XSRF-TOKEN': 'csrftoken',

       })
};

@Injectable({
  providedIn: 'root'
})
export class StoryapiService {
  API_URL = 'http://127.0.0.1:8000/storyapi/';
  constructor(private http: HttpClient) { }


  /** GET stories from the server */
  Story(): Observable<story[]> {
    return this.http.get<story[]>(this.API_URL);
    }


  /** POST: add a new story to the server */
  addStory(story : story[]): Observable<story[]>{
  return this.http.post<story[]> (this.API_URL,story, httpOptions);
    //console.log(user);
  }

   /** DELETE: delete source to the server */

    deleteStory(id: string): Observable<number>{

     return this.http.delete<number>(this.API_URL +id, httpOptions);
  }

  }

//component.html

<!--<h2>My stories</h2>-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


  <div class="container mt-5">
  <div class="form-group">
    <input
      type="text"
      class="form-control"
      placeholder="Search..."
      [(ngModel)]="filterTerm"
    />
  </div>

    <ol>
    <li *ngFor="let story of story$ | async | filter: filterTerm">
    <div class="card">
          <div class="card-body">
            <h5 class="card-title"><a href = '{{story.url}}'>{{story.title}}</a></h5>
            <p class="card-text">{{story.body_text}}</p>
            <p >Published on :-{{story.pub_date}}</p>
            <p>Source:- {{story.source}}</p>

            <button class="btn btn-primary" (click)="deleteStory(story.id)" style="margin-left:5px">Delete </button>
<!--            <button class="btn btn-primary" (click)="editSource(story.id, story" style="margin-left:5px ">Edit </button>-->
              <br>
          </div>

              </div>
         </li>
  </ol>

  </div>

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