title: Is it possible to include antiforgerytoken in XMLHttpRequest header?
body: <p>I am using a library called <a href="http://slimimagecropper.com/" rel="noreferrer">Slim</a>, to upload images to my asp.net MVC project.</p>
  
  <p>The JQuery library is using XMLHttpRequest to send requests to the server, I have gone through all the manual and there is nothing about how to include anti forgery token to the server.</p>
  
  <p>So I manually added this line before the send: </p>
  
  <pre><code>data.__RequestVerificationToken = $('input[name="__RequestVerificationToken"]').val();
  </code></pre>
  
  <p>Even though the token is included in the data, the Asp.net MVC filter: <em>ValidateJsonAntiForgeryTokenAttribute</em> is not recognizing it, as it is expecting the token to be in the <em>header</em>. here is the validation code on the server:</p>
  
  <pre><code>AntiForgery.Validate(cookie != null ? cookie.Value : null,
                               httpContext.Request.Headers["__RequestVerificationToken"]);
  </code></pre>
  
  <p>and here is the library's send function with the extra line that I have added at the buttom to include the token. How can include the token in the header?</p>
  
  <pre><code>var send = function send(url, data, requestDecorator, progress, success, err) {
  
  var xhr = new XMLHttpRequest();
  
  // if progress callback defined handle progress events
  if (progress) {
      xhr.upload.addEventListener('progress', function (e) {
          progress(e.loaded, e.total);
      });
  }
  
  // open the request
  xhr.open('POST', url, true);
  
  // if request decorator defined pass XMLHttpRequest instance to decorator
  if (requestDecorator) {
      requestDecorator(xhr);
  }
  
  // handle state changes
  xhr.onreadystatechange = function () {
  
      if (xhr.readyState === 4 &amp;&amp; xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) {
  
          var text = xhr.responseText;
  
          // if no data returned from server assume success
          if (!text.length) {
              success();
              return;
          }
  
          // catch possible PHP content length problem
          if (text.indexOf('Content-Length') !== -1) {
              err('file-too-big');
              return;
          }
  
          // if data returned it should be in suggested JSON format
          var obj = void 0;
          try {
              obj = JSON.parse(xhr.responseText);
          } catch (e) {}
  
          // if is failure response
          if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) === 'object' &amp;&amp; obj.status === 'failure') {
              err(obj.message);
              return;
          }
  
          success(obj || text);
      } else if (xhr.readyState === 4) {
  
          var _obj = void 0;
          try {
              _obj = JSON.parse(xhr.responseText);
          } catch (e) {}
  
          // if is clean failure response
          if ((typeof _obj === 'undefined' ? 'undefined' : _typeof(_obj)) === 'object' &amp;&amp; _obj.status === 'failure') {
              err(_obj.message);
              return;
          }
  
          err('fail');
      }
  };
  
  // I have added this line to library to include anti forgery token
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  data.__RequestVerificationToken = $('input[name="__RequestVerificationToken"]').val();
  
  // do request
  xhr.send(data);
  </code></pre>
  
  <p>};
  `</p>