XMLHttpRequest不添加标题 – “X-Requested-With：XMLHttpRequest”

我有一个ajax调用，我使用jQuery.ajax（）向mvc动作发出请求。 这一切都很好。 但是由于某些表单具有文件控制，我将其从使用jQuery.ajax（）更改为使用XMLHttpRequest使用HTML5 File API发送它。

由于进行此更改，MVC操作方法不再将其视为ajax请求。 使用Fiddler2我注意到它不再在请求中添加“X-Requested-With：XMLHttpRequest”，我认为这是问题所在。

我试图发送的表单中没有文件输入，只有普通的文本框等，但我试图保持方法通用处理两者。 以下是我用来发送ajax请求的代码：

// get the edit tender form var $Form = $Button.closest('form'); var Url = $Form.attr('action'); var AjaxRequestObject = new XMLHttpRequest(); var FormDataToSend = new FormData(); $Form.find(':input').each(function () { if ($(this).is('input[type="file"]')) { var files = $(this)[0].files; if (files.length > 0) { FormDataToSend.append(this.name, files[0]); } } else { FormDataToSend.append(this.name, $(this).val()); } }); AjaxRequestObject.open('POST', Url, true); AjaxRequestObject.onreadystatechange = function () { if (AjaxRequestObject.readyState == 4) { // handle response. if (AjaxRequestObject.status == 200) { if (!AjaxErrorExists(AjaxRequestObject.responseText, )) { alert("success"); console.log(AjaxRequestObject.responseText); } else { alert('failure'); } } else { alert('failure'); } } }; AjaxRequestObject.send(FormDataToSend); 

此代码是在我遇到Darin Dimitrov提供解决方案的问题后提供的，因此我可以通过ajax发送文件输入。

有什么想法为什么这个请求不会发送ajax调用的标头？

Answer 1

X-Requested-With由jQuery自动添加。 您可以使用AjaxRequestObject.setRequestHeader()轻松地AjaxRequestObject.setRequestHeader()添加它。 文件

Answer 2

我在检测我的请求是否是ajax时遇到了麻烦。 所以，也许这个样本可以节省一两分钟：

 var xmlhttp = new XMLHttpRequest(); xmlhttp.open('GET', URL, true); // `true` for async call, `false` for sync. // The header must be after `.open()`, but before `.send()` xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xmlhttp.onreadystatechange = function() { // 4th state is the last: if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { ... } }; xmlhttp.send(); 

用Flask测试。

Answer 3

您可以本机覆盖所有XMLHttpRequest.open方法调用，并在其中添加X-Requested-With标头，如：

 (function () { // @author https://github.com/stopsopa jfdsa78y453cq5hjfd7s877834h4h3 if (window.XMLHttpRequest.prototype.onOpen) { return console.log('XMLHttpRequest.onOpen is already defined'); } function over(method, on, off) { var old = window.XMLHttpRequest.prototype[method]; if (!old.old) { var stack = []; window.XMLHttpRequest.prototype[on] = function (fn) { if (typeof fn === 'function') { stack.push(fn); } } window.XMLHttpRequest.prototype[off] = function (fn) { for (var i = 0, l = stack.length ; i < l ; i += 1 ) { if (stack[i] === fn) { stack.splice(i, 1); break; } } } window.XMLHttpRequest.prototype[method] = function () { var args = Array.prototype.slice.call(arguments); var ret = old.apply(this, args); for (var i = 0, l = stack.length ; i < l ; i += 1 ) { stack[i].apply(this, args); } return ret; } window.XMLHttpRequest.prototype[method].old = old; } } over('open', 'onOpen', 'offOpen') XMLHttpRequest.prototype.onOpen(function () { this.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); }); }());