Запрещено: / 403 ошибка при отправке изображения из react в django с помощью axios

У меня есть проект reactjs, который делает запросы с помощью API к django-rest-framework. Я пытаюсь создать поле изображения в reactJS, которое отправляет изображение на сервер django при отправке. Возможно, ошибка связана с токеном csrf, а может и нет. Я новичок. Пожалуйста, помогите. Если возможно, пожалуйста, помогите мне с правильным кодом. Большое спасибо Image.js

import React, { useState} from 'react';
    
    axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';
     axios.defaults.xsrfCookieName = 'csrftoken';
    
    export default function Image() {
    const[images,setImages]=useState(null);
    
    function handleImages(e){
     
      setImages(e.target.files[0])
    }
    function handleSubmit(evemt){
    
      const formData= new FormData();
      formData.append('images',images)
      axios.post('http://127.0.0.1:8000/',formData,{
       headers:{ "Content-Type": "multipart/form-data" }}
       ).then((res)=>{
         console.log(res)
       }
       )
    }
        
      return (
        <div>
          <input type="file" name="images"  accept="image/*"  onChange={handleImages}/>
          <button onClick={handleSubmit}>Upload</button>
        </div>
      )
    }

views.py

from rest_framework.parsers import FileUploadParser
from rest_framework import viewsets
from .serializers import RentDetailsSerializer
from  firstapp.models import RentDetails
from rest_framework.parsers import MultiPartParser, FormParser

class RentDetailsViewSet(viewsets.ModelViewSet):
    serializer_class=RentDetailsSerializer
    queryset=RentDetails.objects.all();
   
    parser_classes = [MultiPartParser, FormParser]

serializers.py from rest_framework import serializers from firstapp.models import RentDetails

class RentDetailsSerializer(serializers.ModelSerializer):
      images=serializers.ImageField(required=False)
      class Meta:
        model = RentDetails

        fields = ['floor_no','distance','location','area','no_of_rooms','price','property_type','images']

settings.py

    REST_FRAMEWORK = {
           'DEFAULT_PARSER_CLASSES': [
               'rest_framework.parsers.JSONParser'
           
           ]
       }
    # REST_FRAMEWORK = {
    #     'DEFAULT_AUTHENTICATION_CLASSES': (
    #         'rest_framework.authentication.TokenAuthentication',
            
    #     )
    # }
    
    
    # CORS_ORIGIN_ALLOW_ALL = True
    CORS_ALLOW_HEADERS = [
        "accept",
        "accept-encoding",
        "authorization",
        "content-type",
        "dnt",
        "origin",
        "user-agent",
        "x-csrftoken",
        "x-requested-with",
    ]
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')

CORS_ORIGIN_WHITELIST = [
     'http://localhost:3000',
     'http://localhost:8000',
]
CSRF_COOKIE_NAME = "XSRF-TOKEN"
CORS_ALLOW_CREDENTIALS = True
Вернуться на верх