Axios请求没有向Django服务器发送预期的cookie头

Question

我试图在React应用程序中使用Axios post请求将文件上传到Django服务器。服务器期望在请求头中包含CSRF cookie。

请求已经包含了我能找到的设置cookie的所有方法。通过document.cookie，设置withCredential: true，指定Cookie报头

这是我的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)
}

这是我的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})

也，我相信我已经正确地设置了相关的Django设置在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'

我能做些什么来确保CSRF cookie包含在请求标头中，或者以其他方式满足CSRF要求?为了确保，如果我们将@csrf_exempt添加到视图中，路由就会工作，所以它应该是一个CSRF问题。

Answer 1

您只需要在formData中包含令牌。不需要标头或cookie操作:

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

提示:当你不确定cookie, header等是否…正在发送，请检查浏览器开发工具中的网络选项卡。如果你在"请求头"中看到它们部分，则它们正在发送，这意味着问题在服务器端。在这种情况下，对于multipart/form-data, Django期望在csrfmiddlewaretoken表单字段中获得令牌。对于application/json请求，可以使用X-CSRFToken头。