I'm currently using the following script to submit my Statamic form using ajax with the code below. After moving my site to https I'm now seeing a 401 unauthorized error though!

"Failed to load resource: the server responded with a status of 401 (Unauthorized)" https://[website-rul]/!/Form/create

The problem probably stems from my lack of understanding the intricacies ajax... but any guidance would be a massive help!

the_form.submit(function(event) {
  var formData = $(the_form).serialize();
  event.preventDefault();
  the_form.find("button").text("Sending");

  $.ajax({ 
      type: 'POST',
      url: $(the_form).attr('action'),
      data: formData,
      beforeSend: function(xhr) {
        xhr.setRequestHeader( 'X-CSRF-Token', $(the_form).find('input[name="_token"]').val() );
      },
      success: function(msg) {
        event.preventDefault();
        the_form.find("button").text("Sent").toggleClass("sent");
        the_form.find('.form-success').removeClass('hidden');
        setTimeout(function() {
            the_form.find('.form-success').addClass('hidden');
        }, 5000);
      },
      error: function(jqXhr, textStatus, errorThrown) {
          console.log(textStatus + ': ' + errorThrown);
      }
  }).fail(function(jqXHR, textStatus, errorThrown) {
      console.log(textStatus + ': ' + errorThrown);
  });
});