Magento 2 Ajax form key invalid request

Question

I'm trying to send a form from a modal and also an image from that form.

the form_data works fine with only serialize(), but I need to attach the image to data, so I did this:

 click: function (data) {
 var form_data = new FormData();
 var form = $("#bss-refund-form").serialize();
 form_data.append('form', form);
 
 
 $.each($('#evidence')[0].files, function(i, file) {
 form_data.append('evidence', file);
 });
 
 if($('#bss-refund-form').valid()) {
 $.ajax({
 showLoader: true,
 url: url,
 type: 'POST',
 data: form_data,
 processData: false,
 contentType: false
 })
 .done(function () {
 $("#bss-refund-modal").modal('closeModal');
 $("#bss-refund-form")[0].reset();
 location.reload(true);
 console.log("ok" + form_data);
 })
 .fail(function () {
 $("#bss-refund-modal").modal('closeModal');
 console.log("bad" + form_data);
 });
 }
 }

in the Controller here is the form_key validation.

if (!$this->formKeyValidator->validate($this->getRequest())) {
 $this->messageManager->addErrorMessage("Invalid request!");
 return $resultRedirect->setPath('customer/account/');
 }

Answer 1

I had this issue, and my problem was the wrong domain set in table core_config_data on path "web/cookie/cookie_domain". Check this config has the right value for your domain.

https://support.hypernode.com/en/troubleshooting/performance/how-to-fix-invalid-form-key-error