使用formdata时如何在XMLHttpRequest中添加头数据？答案

【问题标题】：How to add header data in XMLHttpRequest when using formdata?使用formdata时如何在XMLHttpRequest中添加头数据？
【发布时间】：2013-11-08 18:45:09
【问题描述】：

我正在尝试实现文件上传 API，此处给出：
Mediafire file Upload

我能够成功上传发布数据和获取数据，但不知道如何发送x-filename属性，这意味着是 API 指南中给出的 Header data。

我的代码：

xmlhttp=new XMLHttpRequest();
var formData = new FormData();

formData.append("Filedata", document.getElementById("myFile").files[0]);

var photoId = getCookie("user");
// formData.append("x-filename", photoId);            //tried this but doesn't work
// xmlhttp.setRequestHeader("x-filename", photoId);   //tried this too (gives error) [edited after diodeous' answer]

xmlhttp.onreadystatechange=function()
{
    alert("xhr status : "+xmlhttp.readyState);
}

var url = "http://www.mediafire.com/api/upload/upload.php?"+"session_token="+getCookie("mSession")+"&action_on_duplicate=keep";

xmlhttp.open("POST", url);
// xmlhttp.setRequestHeader("x-filename", photoId);   //tried this too, doesnt work. Infact nothing gets uploaded on mediafire.  [edited after apsillers' answer]
// cant get response due to same origin policy
xmlhttp.send(formData);

【问题讨论】：

你能给我们setRequestHeader的错误文本吗？
它是javascirpt，因此没有错误文本，脚本只是停止执行，可能是不允许的
澄清一下，您的意思是您的browser's JavaScript console 中没有错误？
@apsillers 哦，我从来没有新的 abt Javascript Console 错误：未捕获的 InvalidStateError：尝试使用不可用或不再可用的对象。 upload.php:42 uploadAjax upload.php:42 onclick upload.php:130
@apsillers 第 42 行是 setrequestheader 行 & 第 130 行有一个带有 onclick 属性的按钮，可以调用上述代码

标签： javascript http-headers xmlhttprequest form-data mediafire

【解决方案1】：

你的错误

InvalidStateError：尝试使用不可用或不再可用的对象

出现是因为您必须调用setRequestHeader 之后调用open。只需将您的setRequestHeader 行移到您的open 行下方（但在send 之前）：

xmlhttp.open("POST", url);
xmlhttp.setRequestHeader("x-filename", photoId);
xmlhttp.send(formData);

【讨论】：

摆脱了错误，但仍然无法正常工作。由于同源策略，实际上无法从 mediafire 获得响应。不知道问题出在哪里，请检查Mediafire API 并让我知道问题出在哪里，文件已成功上传到 mediafire 而无需进行此编辑，现在什么都没有上传！
没有上传该行文件，但使用默认名称！
这让事情变得更清楚了。见Understanding XMLHttpRequest over CORS。同源策略允许“简单”请求到达客户端，然后决定客户端是否可以读取结果。 “非简单”请求在发送实际请求之前通过“预检”请求进行验证。添加非简单标头将您的请求从简单更改为非简单。在这两种情况下，我都假设您无法读取服务器的响应？
或者对于解决方法，我可以在将上传文件发送到 mediafire 之前更改其名称吗？然后我就不需要发送额外的参数了。
哦，很高兴知道添加标头会使请求变得不简单。感谢您的帮助:)

【解决方案2】：

使用：xmlhttp.setRequestHeader(key, value);

【讨论】：

我也试过了，javascript在这个语句后停止执行，不起作用！（将其添加到我的问题中）

【解决方案3】：

检查键值对是否真的出现在请求中：

在 Chrome 中，可以找到类似的位置：F12: Developer Tools > Network Tab > Whatever request you have sent > "view source" under Response Headers

根据您的测试工作流程，如果您添加的任何对不存在，您可能只需要清除浏览器缓存。要验证您的浏览器是否使用了最新的代码，您可以检查页面的来源，在 Chrome 中可以找到类似的位置： F12: Developer Tools > Sources Tab > YourJavascriptSrc.js 并检查您的代码。

但正如其他答案所说：

xhttp.setRequestHeader(key, value);

应该在您的请求标头中添加一个键值对，只需确保将其放在您的 open() 之后和您的 send() 之前

【讨论】：