J'essaie de télécharger un fichier sur un serveur Django à l'aide de la requête de publication Axios dans une application React. Le serveur attend un cookie CSRF dans l'en-tête de la requête.

Cette demande contient déjà toutes les méthodes que je peux trouver pour paramétrer les cookies. Via document.cookie，设置withCredential: true，并指定Cookie en-tête.

Voici ma demande Axios :

const onSubmit = async (data) => {
    const formData = new FormData()
    formData.append('file', data.file[0])

    const csrftoken = getCookie('csrftoken');
    document.cookie = `csrftoken=${csrftoken}`

    const res = await axiosInstance.post('/upload/', formData, {
        timeout: 0,
        headers: {
            'Cookie': `csrftoken=${csrftoken}`, 
            'Content-Type': 'multipart/form-data',
            'x-csrftoken': csrftoken,
        },
        withCredentials: true,
    })

    console.log(res)
}

Voici ma vue Django :

def upload_file(request):
    form = UploadFileForm()
    if request.method == 'POST':
        form = UploadFileForm(request.POST, request.FILES)

        if form.is_valid():
            file_id = save_file_to_database(request.FILES['file'])
            response = JsonResponse({'id': file_id}, status=201)
            return response
        else:
            response = HttpResponse({'message': 'Upload failed'}, status=400)
            return response

    return render(request, 'upload.html', {'form': form})

De plus, je pense que les paramètres Django pertinents sont correctement configurés dans settings.py :

CORS_ORIGIN_WHITELIST = (
    "http://localhost:8000",
    "http://127.0.0.1:5173",
)

CSRF_TRUSTED_ORIGINS = [
    "http://127.0.0.1:5173"
]

SESSION_COOKIE_SAMESITE = 'None'

Comment garantir que les cookies CSRF sont inclus dans les en-têtes de requête ou répondent aux exigences CSRF ? Bien sûr, l'itinéraire fonctionne si nous ajoutons @csrf_exempt à la vue, cela devrait donc vraiment être un problème CSRF.