csrf_token of Django into Vuejs when seperate them

This is going to be wildly unpopular, but I've found it to be a relatively simple, secure and unobtrusive way to separate the front/backend.

In your VueJS app, you've probably got a login redirect when the user tries to access a page and are unauthenticated.

So instead of sending it to a vue router page, redirect it to /account/login/ (or some django app route - put an exception in cloudfront, or nginx proxy for /account/login/ to proxy pass to django) - then in the login.html template, just use a javascript window.location.href to your vueJS login page /login

The csrf_token will be set as a HttpOnly, secure cookie (which is what you want), and the disruption to the user is so minimal as to not even justify worrying about.

You can set the CSRF token in the header of your AJAX request. E.g., if you use jquery and jquery.cookie library, you can easily retrieve the Django-set csrftoken cookie like so:

$.ajax({
    url : 'YOUR_URL_HERE',
    headers: {'X-CSRFToken': $.cookie('csrftoken')},
    type: 'POST',
    dataType: 'json',
    data: {},
    success: function() {

    },
    error: function(xhr, errMsg, err) {
    },  
});

Django documentation also includes a section on this: https://docs.djangoproject.com/en/1.11/ref/csrf/#ajax

Please note that this solution may depend on your specific Django settings. The Django documentation link above details everything pretty clearly.

EDIT:

Given that even your initial page request is not served by Django, here is how you can accomplish what you're looking for...

1.) Create a view in your Django app that manually generates and returns a CSRF token (using django.middleware.csrf.get_token):

def get_csrf_token(request):
    token = django.middleware.csrf.get_token(request)
    return JsonResponse({'token': token})

2.) You would also need to add an appropriate entry in your Django URLs file:

url(r'^get-token/$', get_csrf_token)

3.) Then your Vue.js app can fetch the CSRF token using this endpoint. This doesn't need to be a user-initiated event; for example, you can configure your front-end app to fetch it on the $(document).ready() event. Then, using your preferred AJAX library (I am using jQuery in my example):

$.ajax({
    url: '/get-token/',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
       $.cookie('csrftoken', data.token); // set the csrftoken cookie
    }
});

4.) Now your csrftoken cookie is set and should be usable for subsequent POST requests.

$.ajax({
    url : 'YOUR_URL_HERE',
    headers: {'X-CSRFToken': $.cookie('csrftoken')},
    type: 'POST',
    dataType: 'json',
    data: {},
    success: function() {

    },
    error: function(xhr, errMsg, err) {
    },  
});

I have used jQuery for AJAX functionality and the jQuery.cookie library for getting and setting cookies, but of course you can use whichever library you would prefer for these functions.

According to the Django documentation you can simply use the ensure_csrf_cookie decorator on a view and that will send the cookie with the token with the response.