XMLHttpRequest không thêm tiêu đề - "X-Requested-With: XMLHttpRequest"

Question

Tôi có một cuộc gọi ajax nơi tôi đã sử dụng jQuery.ajax() để thực hiện một yêu cầu đến một hành động mvc. Điều này tất cả làm việc tốt. Tuy nhiên do một số biểu mẫu có điều khiển tệp tôi đã thay đổi nó bằng cách sử dụng jQuery.ajax() để sử dụng XMLHttpRequest để gửi nó bằng cách sử dụng API tệp HTML5.

Kể từ khi thực hiện thay đổi này, phương thức hành động MVC không còn xem đó là yêu cầu ajax nữa. Sử dụng Fiddler2 Tôi đã nhận thấy rằng nó không còn thêm "X-Requested-With: XMLHttpRequest" vào yêu cầu và tôi giả định đây là vấn đề.

Biểu mẫu tôi đang cố gắng gửi không có đầu vào tệp trong đó, chỉ các hộp văn bản thông thường, v.v. nhưng tôi đã cố giữ phương thức chung để xử lý cả hai. Sau đây là đoạn code tôi đang sử dụng để gửi yêu cầu 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); 

Mã này đã được cung cấp sau đây là một vấn đề tôi đã mà Darin Dimitrov cung cấp giải pháp cho, vì vậy tôi có thể gửi cho các đầu vào tập tin bằng ajax.

Bất kỳ ý tưởng nào tại sao yêu cầu này sẽ không gửi tiêu đề cho cuộc gọi ajax?

Answer 1

X-Requested-With được jQuery thêm tự động. Bạn có thể dễ dàng tự thêm nó với AjaxRequestObject.setRequestHeader(). Docs

Answer 2

Tôi gặp khó khăn khi phát hiện nếu yêu cầu của tôi là ajax. Vì vậy, có thể mẫu này sẽ tiết kiệm cho ai đó một hoặc hai phút:

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(); 

Thử nghiệm với Flask.

Answer 3

Bạn có thể ghi đè lên natively tất cả các cuộc gọi phương pháp XMLHttpRequest.open và thêm vào đó X-yêu cầu-Với tiêu đề như:

(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'); 
    }); 
}());