Question

我编写了一个React组件，应该用于我的应用程序中的所有表单。当单击某个按钮时，我进行了一些验证，最后我想将表单发布到服务器。这就是这部分目前的样子：

// get what should be submitted
const formData = new FormData(theForm)); // theForm is the DOM-element

//  post the form-data element
fetch(theForm.action,
    {
        credentials: "include", //pass cookies, for authentication
        method: theForm.method,
        headers: {
            "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",
            //"Content-Type": "application/x-www-form-urlencoded"
        },
        body: formData
    })
    .then(res => console.dir(res))
    .catch(reason => console.error(reason));

显示的代码段在Chrome中正常工作。但是，在IE11中并非如此。另一方面，当取消注释Content-Type标头时，它也会在Chrome中中断。

如找到https://stackoverflow.com/a/46642899/615288，它始终是"multipart/form-data"。但即使我将其设置为multipart/form-data，也不会将值发送到服务器。

我使用的是https://github.com/jimmywarting/FormData以及whatwg-fetch的FormData polyfill。

我不知道这里发生了什么，因为从版本9开始，FormData应该在IE中运行。

旁注：当评论整个标题部分时，它仍然可以在Chrome中运行，因为浏览器似乎猜测正确的那些（在开发人员工具中可以看到）

Answer 1

有人今天在回购报告中向我报告。

https://github.com/jimmywarting/FormData/issues/44

显然“IE无法在XHR上设置Content-Type标头，其主体是一个类型的Blob”，这就是为什么你得到错误的内容类型标头。将版本更新为可能3.0.7修复此

Answer 2

我遇到了这个问题，但是在无奈中，我发现向FormData对象添加一个额外的字段突然使所有字段都出现在服务器上。

const formData = new FormData(theForm);

// this somehow makes it work
formData.append('fakefield', 'nothing to see here!');

fetch(theForm.action).then(/* do the stuff */);

我不知道它为什么起作用，但是在我添加该行之前，服务器收到{}作为请求正文，之后又收到{ myformfield: 'myvalue', myotherfield: 'myothervalue', fakefield: 'nothing to see here!' }

希望这可以为某人省去一些麻烦：）

在Internet Explorer 11中通过fetch-api发布FormData-object时为空值

2 个答案: