Permintaan Axios tidak menghantar pengepala kuki yang dijangkakan ke pelayan Django

Question

Saya cuba memuat naik fail ke pelayan Django menggunakan permintaan siaran Axios dalam apl React. Pelayan menjangkakan kuki CSRF dalam pengepala permintaan.

Permintaan ini sudah mengandungi setiap kaedah yang saya dapati untuk menetapkan kuki. Melalui document.cookie，设置withCredential: true，并指定Cookie pengepala.

Ini adalah permintaan Axios saya:

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)
}

Ini adalah pandangan Django saya:

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})

Selain itu, saya percaya saya telah menyediakan tetapan Django yang berkaitan dengan betul dalam 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'

Bagaimana untuk memastikan kuki CSRF disertakan dalam pengepala permintaan atau sebaliknya memenuhi keperluan CSRF? Yang pasti, laluan itu berfungsi jika kita menambah @csrf_exempt pada paparan, jadi ia sepatutnya menjadi isu CSRF.

Answer 1

Anda hanya perlu balut token formData. Tiada pengepala atau manipulasi kuki diperlukan:

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

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

    console.log(res)
}

Petua: Apabila anda tidak pasti sama ada kuki, pengepala, dsb. sedang dihantar, semak tab Rangkaian dalam alat pembangun penyemak imbas anda. Jika anda melihatnya dalam bahagian "Pengepala Permintaan" permintaan, maka mereka sedang dihantar, yang bermaksud masalahnya terletak pada bahagian pelayan. Dalam kes ini, untuk pengepala multipart/form-data Django 需要 csrfmiddlewaretoken 表单字段中的令牌。对于 application/json 请求，您可以使用 X-CSRFToken.