title: CORS not working on Chrome/Firefox and Apache
body: <p>I'm trying to get an AJAX request working between my browser and an Apache server(residing in a different domain) using CORS.</p>
  
  <p>At the server side, I've made the following changes in the httpd.conf section of the server as per the responses in "<a href="https://stackoverflow.com/questions/10640596/header-set-access-control-allow-origin-in-htaccess-doesnt-work">Header set Access-Control-Allow-Origin in .htaccess doesn&#39;t work</a>":</p>
  
  <pre><code>Header add Access-Control-Allow-Origin "*"
  Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
  Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
  </code></pre>
  
  <p>My AJAX call is of the form: </p>
  
  <pre><code>        $.ajax({
              url        :'https://x.x.x.x/validateCustomerID',
              type       : 'POST',
              cache    : false,
              crossDomain: true,
              contentType: 'application/json',
              beforeSend: function(xhr){
                      xhr.setRequestHeader("Access-Control-Allow-Methods","POST");
                      xhr.setRequestHeader("Access-Control-Allow-Headers","X-Requested-With");
                      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
              },
              data       : {loginId : '12345'},
              success    : function(response){console.log("Success"+JSON.stringify(response))},
              error      : function(response){console.log("Error"+JSON.stringify(response))}
          });
      }
  </code></pre>
  
  <p>I've also tried commenting out the beforeSend() in order to avoid a preflight request but it wasn't successful either.</p>
  
  <p>The error messages that I receive on Chrome and Firefox are:</p>
  
  <ul>
  <li>In Chrome:</li>
  </ul>
  
  <p>"XMLHttpRequest cannot load <a href="https://x.x.x.x/validateCustomerID" rel="nofollow noreferrer">https://x.x.x.x/validateCustomerID</a>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403."</p>
  
  <ul>
  <li>In Firefox:</li>
  </ul>
  
  <p>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <a href="https://x.x.x.x/validateCustomerID" rel="nofollow noreferrer">https://x.x.x.x/validateCustomerID</a>. (Reason: CORS request failed)."</p>
  
  <p>There are no response headers received from the server in my browser which I think are mandatory for CORS to work and also logs in the server shows no request reaching it from my browser.</p>
  
  <p>I would really appreciate if someone here can help me resolve this issue as I'm stuck here for quite a few days now and have used almost all hit and trial methods to make this thing work.</p>