AJAX的FormData格式失效

写Ajax遇到了难题，请大家帮忙看一下
我想在AJAX中使用FormData，但没有办法设置Content-Type，无论设置成什么样子，请求主体都一定是multipart/form-data。但若是单纯使用form标签，就没问题。

  • HTML部分：
<button id="bu">click</button>
  • Js部分：

【这里的js中用的是"application/x-www-form-urlencoded"，而不是“multipart/form-data”】

document.getElementById("bu").onclick=function(){
            var fd=new FormData();
            fd.append("username", "Groucho");
            fd.append("accountnum", 123456);
            var xhr=new XMLHttpRequest();
            xhr.open("post","../cgi-bin/crack.cgi",true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(fd);
            xhr.onload=function(){
                console.log(xhr.responseText);
            }
        };
  • 生成的请求头：

【请求头没问题】

img

  • 请求主体：

【这里就有问题了】

img

明明请求头是"application/x-www-form-urlencoded"，但最终的主体却是“multipart/form-data”。
真是很让人困惑，请大家帮忙解答一下，谢谢。

  • 这篇博客: Ajax请求中Content-Type的几种类型中的 multipart/form-data 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary).

    multipart/form-data会随机生成一个分界符，用这个分解符来分隔参数。其目的是防止上传文件中出现分界符导致服务器无法正确识别文件起始位置。

    如果使用application/x-www-form-urlencoded或者multipart/form-data格式提交文件，浏览器控制台会报错：Illegal invocation。具体原因未知，后续会更新。

    在这里插入图片描述

    遇到此情况可以参考Illegal invocation
    将ajax添加如下设置：

    	contentType: false,
	// 告诉jQuery不要去设置Content-Type请求头
	processData: false,
	// 告诉jQuery不要去处理发送的数据

    contentType

    如果为true的时候，jq就会去操作multipart/form-data生成的分界符，导致后台服务器无法操作数据而请求失败。

    processData

    默认为true，规定通过请求发送的数据是否转换为查询字符串，默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。