Запрещено: / 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