Django CSRF кросс-сайт AJAX проблема

Question

У меня есть сервер backend на localhost: 8000 и сервер интерфейса на localhost: 3000. Backend - это Django, и у меня установлен пакет corsheaders, и я делаю запросы GET без проблем. Когда я открываю свой сайт, первый запрос GET успешно устанавливает токен CSRF (я вижу cookie в инструментах dev).

У меня есть это в settings.py:

CORS_ORIGIN_WHITELIST = (
    'localhost:3000' 
) 

CORS_ALLOW_METHODS = (
    'DELETE', 
    'GET', 
    'OPTIONS', 
    'PATCH', 
    'POST', 
    'PUT' 
) 

CORS_ALLOW_HEADERS = (
    'accept', 
    'accept-encoding', 
    'authorization', 
    'content-type', 
    'dnt', 
    'origin', 
    'user-agent', 
    'x-csrftoken', 
    'x-requested-with', 
) 

CSRF_TRUSTED_ORIGINS = (
    'localhost:3000', 
) 

CORS_ALLOW_CREDENTIALS = True 

Теперь я пытаюсь сделать запрос POST, и я постоянно отвергнут сервером:

403 - Forbidden (CSRF cookie not set.): /myapp/myview/ 

и это что мой JS выглядит следующим образом:

let csrftoken = utils.getCookie('csrftoken'); // logged this on the console, the token is really here 

jQuery.ajaxSetup({ 
    beforeSend: function(xhr, settings) { 
    xhr.setRequestHeader("X-CSRFToken", csrftoken); 
    } 
}); // this might be wrong - I did read it is used only if it's not cross site, but I still gave it a try 

jQuery.ajax({ 
    url: url, 
    type: 'POST', 
    data: {attr: value, csrfmiddlewaretoken: csrftoken} 
})... 

Я пробовал только с csrfmiddlewaretoken в данном AJAX. Я пробовал только с настройкой заголовка запроса. Я пробовал и то, и другое. Еще не повезло. Я, очевидно, что-то пропустил; Я никогда раньше не пытался делать POST в Django на разных сайтах.

Любые предложения?

EDIT: Я выяснил, что проблема находится в другом месте.

Answer 1

Попробуйте поместить XSRF-токен в заголовок вашего запроса Ajax.

$.ajax({ 
     url : urlToCall, // the endpoint 
     type : "POST", // http method 
     headers: { "X-CSRFToken": "your token here" }, 
     success : function(response) { 
      console.log('success', response); 
       }, 
      error : function(xhr,errmsg,err) { 
       console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console 
      } 
    }); 

Answer 2

Я был в состоянии сделать это с:

$.ajax({ 
    url : urlToCall, // the endpoint 
    type : "POST", // http method 
    data : { 
     csrfmiddlewaretoken: "Your token", 
     data... 
    }, 

    success : function(response) { 
     console.log('success', response); 
      }, 
     error : function(xhr,errmsg,err) { 
      console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console 
     } 
}); 

Надеется, что это помогает!