title: jQuery not sending a custom headers CORS request to node.js server, or server not receiving?
body: <p>I've been struggling with this one for a whole weekend. The problem exists only when accessed through mac computers and when hosted through my nodejitsu instance, and doesn't exist on my localhost server.</p>
  
  <p>My application is quite typical. It has a web server component and REST server on a different domain --hence the need for CORS. <strong>Only added complexity is custom headers.</strong></p>
  
  <p>I've set up CORS on my node.js server as follows</p>
  
  <pre><code>var allowCrossDomain = function(req, res, next) {
  
      console.log(req.headers);
  
      res.header('Access-Control-Allow-Origin', '*');
      res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
      res.header('Access-Control-Allow-Headers', 'Accept, X-api-key, X-auth-token, Content-Type, Content-Length');
  
      // intercept OPTIONS method
      if ('OPTIONS' == req.method) {
          res.header('Access-Control-Allow-Origin', '*');
          res.header('Access-Control-Allow-Headers', 'Accept, X-api-key, X-auth-token, Content-Type, Content-Length');
          res.send(200, {});
      }
      else {
        next();
      }
  };
  </code></pre>
  
  <p>The frontend $.ajax call is like this</p>
  
  <pre><code>//create user
  $.ajax({
      url: host + 'users',
      headers: {'X-api-key': apikey},
      type: 'POST',
      dataType: 'json',
      contentType: 'application/json',
      data: JSON.stringify({
          email: userInfo.email,
          username: username,
          password: pasword,
      }),
      xhrFields: {},
      crossDomain: true,
      success: function (res) {
          console.log(res);
          $('.messages')
              .removeClass('error')
              .addClass('success')
              .html('&lt;strong&gt;Success! &lt;/strong&gt;Check email for activation link');
      },
      error: function (xhr, status, errorThrown) {
          console.log(xhr.responseText);
          var errorMessage = $.parseJSON(xhr.responseText);
          $('.messages')
              .removeClass('success')
              .addClass('error')
              .html('&lt;strong&gt;Oops!&lt;/strong&gt; '+errorMessage.error);
  
      }
  });
  </code></pre>
  
  <p>Techincally this should work. It's a textbook ajax call to a node server, but when I make the call in chrome, I get the following error pre-preflight in chrome terminal.</p>
  
  <pre>
  
      OPTIONS http://api.dev.XXXXX.com/users/login net::ERR_EMPTY_RESPONSE
      jquery-1.7.2.js:8240
      send jquery-1.7.2.js:8240
      jQuery.extend.ajax jquery-1.7.2.js:7719
      (anonymous function) VM62:2
      InjectedScript._evaluateOn VM57:730
      InjectedScript._evaluateAndWrap VM57:669
      InjectedScript.evaluate
  
  </pre>
  
  <p>On firefox/mozilla it's this and on Safari it's quite similar:</p>
  
  <pre>
  
      "NetworkError: 502 Bad Gateway - http://api.dev.XXXX.com/users/fbauth"
      fbauth
      Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api.dev.XXXX.com/users/fbauth. This can be fixed by moving the resource to the same domain or enabling CORS.
  
  </pre>
  
  <p>I've somehow managed to partially bypass this by preceding the complex HTTP request simple HTTP request to the server. I don't know why this makes it work, which makes it the world's ugliest, and most partially effective hack.</p>
  
  <pre><code>  $(document).ready(function(){
      setTimeout(function(){
      $.ajax({
        url: host + 'users/login',
        type: 'POST',
        dataType: 'json',
        data: JSON.stringify({
  
        })
      });
  
      $.ajax({
        url: host + 'users/fbauth',
        type: 'POST',
        dataType: 'json',
        data: JSON.stringify({
  
        })
      });
  
      }, 500);
    })
  </code></pre>
  
  <p>Issue now is that a preflight HAS to be performed almost immediately after doing the simple HTTP, and as a result, oauth with fb login doesn't work, since it does a few requests to fb and back before doing what it needs to do.</p>
  
  <p>I'm totally stuck here. Is this a webkit/mozilla engine issue? Or am I missing something critical here?</p>
  
  <p>Here's a jsfiddle with an example request to a test endpoint. Check console while running.
  <a href="http://jsfiddle.net/cvince/6nPLJ/" rel="nofollow">http://jsfiddle.net/cvince/6nPLJ/</a></p>
  
  <p>ISSUE-- Fails on my main dev machine, but it might be working for you. The request preflights and validates properly on 4 of my 6 computers.</p>