title: Why $.ajax call is successful but call via XMLHttpRequest fails with pre-flight error?
body: <p>I am using Java 8, Tomcat 8, Spring 3.0, jQuery 2.2.4, chrome browser.</p>
  
  <p>My request using $.ajax is successful. I am moving away from jQuery and wanted to use XMLHttpRequest object. I am getting "Access-Control-Allow-Origin" error.</p>
  
  <p>I am setting following parameters in javascript.</p>
  
  <pre><code>var xhttp = new XMLHttpRequest();
  xhttp.open("POST", request, true);
  xhttp.onreadystatechange = function() {
      if (this.status == 200) {
          alert("Saved Successfully.");
      }
  };
  
  xhttp.setRequestHeader("Content-type", "plain/text;charset=UTF-8");
  xhttp.setRequestHeader("crossDomain", "true");
  xhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
  xhttp.setRequestHeader("Accept", "text/plain; */*; *");
  
  xhttp.send(data);
  </code></pre>
  
  <p>Following is jquery call, which works.</p>
  
  <pre><code>$.ajax({
              type: "POST",
              url: request,
              data: data,
              dataType: 'text',
              crossDomain: "true",
              statusCode: {
                  200: function(data) {
                      alert("Saved Successfully.");
                  }
              }
          });
  </code></pre>
  
  <p>I am setting following parameters to response object.</p>
  
  <pre><code>response.addHeader( "Content-Type", "text/plain" );
  response.addHeader("Access-Control-Allow-Origin", "*");     
  response.addHeader("Access-Control-Allow-Methods","GET,POST,OPTIONS");
  response.addHeader("Access-Control-Allow-Headers","Content-Type, Content-
    Range, Content-Disposition, Content-Description");
  </code></pre>
  
  <p>The <strong>same</strong> setup works for JQuery call, so I do not think problem with setup. </p>
  
  <p>Can somebody please suggest what is missing?</p>
  
  <hr>
  
  <p><strong>FOLLOWING CODE WORKED:</strong></p>
  
  <pre><code>var xhttp = new XMLHttpRequest();
  xhttp.open("POST", request, true);
  xhttp.onreadystatechange = function() {
     if (this.status == 200) { }};
  
  //xhttp.setRequestHeader("crossDomain", "true");
  xhttp.setRequestHeader("Accept", "text/plain; *//*; *");
  //xhttp.withCredentials = true;
  xhttp.send(data);
  </code></pre>