Django Rest Framework, CSRF và Vue.js

Question

Tôi đang cố gắng sử dụng Vue.js để thực hiện một số phương thức POST cho REST Api của tôi mà tôi đã tạo với Django Rest Framework. Vấn đề là, tôi gặp lỗi CSRF Failed: CSRF token missing or incorrect. khi tôi đăng. Nhưng tôi có thể thấy cookie csrf và được thêm vào tiêu đề.

Dưới đây là các thiết lập của tôi:

REST_FRAMEWORK = { 
    'DEFAULT_PERMISSION_CLASSES': (
     'rest_framework.permissions.IsAuthenticated', 
     'rest_framework.permissions.DjangoModelPermissions' 
    ), 
    'DEFAULT_AUTHENTICATION_CLASSES': (
     'rest_framework.authentication.SessionAuthentication', 
     'rest_framework.authentication.BasicAuthentication' 
    ) 
} 

Dưới đây là cấu hình Vue.js tôi:

var csrftoken = Cookies.get('csrftoken'); 
Vue.http.headers.common['HTTP_X_CSRFTOKEN'] = csrftoken; 

Và đây là phần có liên quan của các tiêu đề đã được gửi:

Cookie:djdt=hide; tabstyle=raw-tab; sessionid=1gl533mrneudxw3l9l2vg0ja1yowwmeo; csrftoken=dN85bhztB1oVRov87BsUrWTM29Ff9sjn 
Host:127.0.0.1:8000 
HTTP_X_CSRFTOKEN:dN85bhztB1oVRov87BsUrWTM29Ff9sjn 
Origin:http://127.0.0.1:8000 
Referer:http://127.0.0.1:8000/agencies/6/add-profiles/ 

Như bạn có thể thấy, Cookie.csrf và tiêu đề HTTP_X_CSRFTOKEN khớp với

Tôi thực sự bối rối. Bất kỳ đề xuất?

Answer 1

Vì vậy, tôi đăng câu trả lời này để đóng câu hỏi.

Sự cố là do tên tiêu đề CSRF sai được gửi theo yêu cầu. Theo tài liệu:

Như với tiêu đề HTTP khác trong request.META, tên tiêu đề nhận từ máy chủ được chuẩn hóa bằng cách chuyển đổi tất cả các ký tự để chữ hoa, thay thế bất kỳ dấu gạch nối với dấu gạch dưới, và thêm một 'HTTP_ 'tiền tố cho tên. Ví dụ: nếu khách hàng của bạn gửi tiêu đề 'X-XSRF-TOKEN', cài đặt phải là 'HTTP_X_XSRF_TOKEN'.

Tôi cũng đang rời khỏi đây tham chiếu đến my question, tích lũy một số vấn đề có thể dẫn đến lỗi CSRF Failed: CSRF token missing or incorrect. ở Django.