title: Can not retrieve data between domain and sub domain
body: <p>I have an Ajax request on a domian xyz.com and I am performing an 
  Ajax request from xyz.com to pull data from abc.xyz.com</p>
  
  <pre><code>var request = $.ajax({
          type: "POST",
          url: "https://abc.mno.com/vending/mainvending.php",
          data: {vlu:"1"},
          dataType: 'json',
          timeout: 10000,
          crossDomain: true,
          async: true,
          cache: false,               
          headers: { "cache-control": "no-cache" },
          error: function(  jqXHR, textStatus, errorThrown )
                 { 
                      alert("error : " + errorThrown + " text :"+textStatus + " j :" +jqXHR.status);
                      // alert(jqXHR.responseText);
                 },
          success: Succeeded,
          beforeSend: function( xhr ) { }
  });
  </code></pre>
  
  <p>but I keep getting this error which is consoled out in the browser (Chrome)</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="https://abc.xyz.com/vending/mainvending.php" rel="nofollow">https://abc.xyz.com/vending/mainvending.php</a>. Request header field cache-control is not allowed by Access-Control-Allow-Headers in preflight response.</p>
  </blockquote>
  
  <p>In the mainvending.php the codes are as follows </p>
  
  <pre><code>&lt;?php
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
  header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
  require_once 'vendors.php';
  
  if(!empty($_POST)){
      /** Other codes follow **/
  }else{
      /** Other codes follow **/
  }
  ?&gt;
  </code></pre>
  
  <p>what am I not doing or what am I doing wrong? The domain name is xyz and the domain I am retrieving data from is of a sub domain could that be the issue and how do I go around this. </p>