Wie csrf-Token aus dem Header mit jQuery reaktivieren, wenn POST nur Methode ist?

Question

Ich schreibe Rest Api mit Spring und benutze jQuery für die App auf der Vorderseite, die diese API verwendet. Die Sitzung wird in einem Cookie gespeichert, so dass ich CSRF-Schutz mit Token benötige. Der Token wird in einem Anfrage/Antwort-Header gesendet und in Meta-Tags auf der Seite gespeichert. Dies ist nicht voll SPA, daher bei der Authentifizierung und Registrierung sende ich separate HTML-Seiten: index.html (für authentifizierte Benutzer), login.html (Anmeldeseite), register.html (Registrierungsseite). Hier ist das Problem, ich weiß nicht, wie man csrf-Token bei der Registrierung und beim Login zurückbekommt, weil die erste und einzige Anfrage immer POST ist, aber irgendwie muss ich zuerst das csrf-Token auf der Seite setzen. Statische Seiten, die ich abrufe, werden nur durch Aufrufen von statischen Ressourcen mit: window.location = '/register.html'; beispielsweise. Ich habe versucht, Anfrage für "/ Token" Endpunkt, die ResponseEntity nur mit Status und holen Token von Header, setzen, aber dann zeigt der Fehler in Javascript, dass jqXHR.getResponseHeader ('X-CSRF-TOKEN') ist keine Funktion ... . seltsam. Wie kann eine Methode mit jquery geschrieben werden, die in diesem Fall das Token vom Header abruft?

Zum Beispiel hier meine Datei register.js und wie ich hole Anhängen und Anhängen Tokens.

In login page i have button whch redirects on registration page: 

$('#registerBtn').on('click', function() { 
    window.location = '/register.html'; 
}); 
-------------------------------- 
And registration page is: 

    $(document).ready(function() { 
    setCsrfToken(); 
    $('#submit').on('click', function() { 
     return $.ajax({ 
      url: '/registration', 
      type: 'POST', 
      beforeSend: function (request) { 
       setHeaderWithCsrfToken(request); 
      }, 
      data: $('#registrationForm').serialize(), 
      timeout: 3000 
     }).then(function (data, textStatus, jqXHR) { 
      console.log(jqXHR.status); 
     }, function (jqXHR) { 
      if (jqXHR === 422) { 
       // $('#registrationForm').append(jqXHR); 
       alert(jqXHR.status); 
      } else { 
       alert(jqXHR.status); 
      } 
     }); 
    }); 
}); 

// simple get method to retrieve response header with token 
function setCsrfToken() { // TODO: how to make it reusable? 
    return $.ajax({ 
     url: '/token', 
     type: 'GET', 
     timeout: 3000 
    }).always(function (jqXHR) { 
     getCsrfToken(jqXHR); 
    }); 
} 

function getCsrfToken(jqXHR) { 
    $('meta[name="X-CSRF-TOKEN"]').attr('content', 
jqXHR.getResponseHeader('X-CSRF-TOKEN')); 
    $('meta[name="X-CSRF-HEADER"]').attr('content', 
jqXHR.getResponseHeader('X-CSRF-HEADER')); 
} 

function setHeaderWithCsrfToken(request) { 
    var token = $('meta[name="X-CSRF-TOKEN"]').attr('content'); 
    var header = $('meta[name="X-CSRF-HEADER"]').attr('content'); 
    request.setRequestHeader(header, token); 
} 

Answer 1

Ich denke, Sie das falsche Argument in der AJAX Callback-Funktion verwenden. Versuchen Sie folgendes:

$.ajax({ 
    url: '/token', 
    type: 'GET', 
    timeout: 3000 
}).done(function (data, textStatus, jqXHR) { 
    getCsrfToken(jqXHR); 
});