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