DRF Forbidden (CSRF cookie не установлен.) из POST-запроса React axios

Как мы знаем, по умолчанию у нас нет доступа к Django CSRFToken в React, поэтому нам нужно как-то его получить. Решением было сделать URL для получения CSRFToken в Response-Headers и установить csrftoken cookie в браузере. Так я и сделал =>

Views.py

@method_decorator(ensure_csrf_cookie, name='dispatch')
class GetCSRFToken(APIView):
    permission_classes = (permissions.AllowAny, )

    def get(self, request, format=None):
        return Response("CSRF cookie set.")

CSRFToken.jsx

import React, { useState, useEffect} from 'react';
import axios from 'axios';

export default function CSRFToken(){

    useEffect(()=>{
        const fetchData = async () => {
            try {
                const url = 'http://localhost:8000/csrf_cookie'
                const response = await axios.get(url,{
                    withCredentials: true,
                }).then(()=>{
                    console.log("CSRF Cookie set.")
                })
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };
        fetchData();
    }, []);

    return (
        <>
        </>
    )
    
} 

Результат =>

После этого мы можем получить доступ к csrftoken и можем отправить его через X-CSRFToken Request-Headers. Но проблема в том, что когда я посылаю запрос , сторона Django не принимает этот csrftoken и отклоняет его.

settings.py

ALLOWED_HOSTS = []

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

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

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

CSRF_TRUSTED_ORIGINS = ['http://localhost:5173']

Views.py

@method_decorator(csrf_protect, name='dispatch')
class MarketDataView(APIView):
    permission_classes = (permissions.AllowAny,)

    def post(self, request, format=None):
        ...

FetchMarketData.js

export const fetchMarketData = createAsyncThunk(
  'market/fetchData',
  async ({requestData, csrftoken}, thunkApi) => {
    try {
      const url = 'http://localhost:8000/api/market'
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': csrftoken
        },
        body: JSON.stringify({
          exchange: 'binance'
        }),
      });
      return await response.json();
    } catch (error) {
      return thunkApi.rejectWithValue(error);
    }
  }
);

Заголовки запросов и ответы Django =>

Как я могу решить эту проблему, ребята?

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