Nginx returns 400 error in Safari

Question

I'm trying send form with Content-type: multipart/form-data. All works fine in the Chrome, FF, Edge but not in Safari. It gets 400 from nginx

Used Laravel + Nuxtjs + Axios

After enabling error_log debug in the nginx conf I see

[info] 11687#11687: *1 client prematurely closed stream: only 767 out of 907 bytes of request body received

Answer 1

This is actually a bug on Safari. As of WebKit build r230963 this is fixed, but there hasn't been an update on Safari yet. In case you want to keep compatible behavior you need to remove file fields that are empty from form data sent in your axios request.

Something like:

$('#myForm').find("input[type='file']").each(function(){
   if ($(this).get(0).files.length === 0) {$(this).remove();}
});
var fData = new FormData($('#myForm')[0]);

This solution is jQuery dependent, but you can adapt this logic to any library.