xhr.getAllResponseHeader returns source Code

Question

var _this = this;
$(document).ready(() => {
  $("#loginForm").submit(function (event) {

    // Standard-Aktion abbrechen
    event.preventDefault();

    // Formular per AJAX senden
    var form = $(this);
    $.ajax({
      type: 'POST',
      url: form.prop('action'),
      data: form.serialize(),
      success: (output, status, xhr) => {

        if (output.match(someString) === null) {
          console.log(xhr.getAllResponseHeaders);
          var header = xhr.getResponseHeader('Set-Cookie');
          console.log(header);
          //loggin erfolgreich
          _this.navCtrl.setRoot("HomePage");
        } else {
                  .
                  .
                  .

Hello Guys,

I'm trying to print my response headers. In the example i look for an specifique header but it returns null. If i use .getAllResponseHeaders, it prints the source code and not the value:

ƒ () {
                return completed ? responseHeadersString : null;
            }

Answer 1

When calling a method, don't forget the ():

console.log(xhr.getAllResponseHeaders());

However, the underlying issue is that you need more permissions for this line:

var header = xhr.getResponseHeader('Set-Cookie');

You only get access to simple headers in your JavaScript unless your server allows them to be exposed, for example:

Access-Control-Expose-Headers: Set-Cookie

So you'll need to add this server-side to allow your JavaScript to access the header.