title: jquery.form and cross-domain requests
body: <p>I'm having a hard time trying to make <a href="http://jquery.malsup.com/form/" rel="nofollow noreferrer">jquery.form</a> with a cross-domain request. I'm having issues with Firefox and Chrome (didn't even try IE yet).</p>
  
  <p>Explanation: my whole site is located inside <a href="http://www.mysite.com" rel="nofollow noreferrer">http://www.mysite.com</a>. However, my contact form is on another server, referenced by <a href="http://contact.mysite.com" rel="nofollow noreferrer">http://contact.mysite.com</a> . I thought that putting it on a subdomain would sidestep the issues regarding cross-domain requests, but apparently it didn't. <a href="http://contact.mysite.com" rel="nofollow noreferrer">http://contact.mysite.com</a> is implemented in <a href="http://www.sinatrarb.com/" rel="nofollow noreferrer">Sinatra</a>.</p>
  
  <p>My javascript setup is nothing fancy. The form's action points to <a href="http://contact.mysite.com" rel="nofollow noreferrer">http://contact.mysite.com</a> and the method is POST:</p>
  
  <pre><code>&lt;form id="contact" action="http://contact.mysite.com/" method="post"&gt;
  </code></pre>
  
  <p>jquery.form is configured with an <a href="http://jquery.malsup.com/form/#ajaxForm" rel="nofollow noreferrer">ajaxForm</a> call:</p>
  
  <pre><code>$(document).ready(function() {
  
    $('#contact').ajaxForm({
      success: function() { $('#success').fadeIn("slow"); },
      error: function() {  $('#error').fadeIn("slow"); }
    });
  
  });
  </code></pre>
  
  <p>The first problem I encountered was with Firefox 3.5 - apparently it sends an OPTIONS request expecting an specific answer from the server. I used <a href="https://stackoverflow.com/questions/4351904/sinatra-options-http-verb">this question</a> to configure my Sinatra app so it did what was expected (it seems that more recent versions of sinatra include an options verb):</p>
  
  <pre><code>require 'rubygems'
  require 'sinatra'
  require 'pony'
  
  # patch sinatra so it handles options requests - see https://stackoverflow.com/questions/4351904/sinatra-options-http-verb
  configure do
    class &lt;&lt; Sinatra::Base
      def options(path, opts={}, &amp;block)
        route 'OPTIONS', path, opts, &amp;block
      end
    end
    Sinatra::Delegator.delegate :options
  end
  
  # respond to options requests so that firefox can do cross-domain ajax requests
  options '/' do
    response['Access-Control-Allow-Origin'] = '*'
    response['Access-Control-Allow-Methods'] = 'POST'
    response['Access-Control-Max-Age'] = '2592000'
  end
  
  post '/' do
    # use Pony to send an email
    Pony.mail(...)
  end
  </code></pre>
  
  <p>With jquery 1.4.3, I saw on firebug an OPTIONS request followed by a POST request (status 200. The email was sent). With jquery 1.3.2 or 1.5, only the OPTIONS request was shown (the email was not sent).</p>
  
  <p>Nevertheless, the <code>error</code> callback is always fired with all versions of jquery I tried. I traced that down to the <code>$.ajax(...)</code> call, so I'm not sure of whether this problem comes from jquery.form or jquery itself.</p>
  
  <p>I tried logging out the information coming from the error:</p>
  
  <pre><code>$('#contact').ajaxForm({
    success: function() { $('#success').fadeIn("slow"); },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log(jqXHR.status);
      console.log(jqXHR.statusText);
    }
  }); 
  </code></pre>
  
  <p>Output on jquery 1.4.3 (after the OPTIONS &amp; POST requests are sent, both with status 200):</p>
  
  <pre><code>0
  (empty string)
  </code></pre>
  
  <p>Output on jquery 1.5 (after OPTIONS returns with a 200 status; POST is never sent)</p>
  
  <pre><code>302
  error
  </code></pre>
  
  <p>I'm really lost here.</p>
  
  <ul>
  <li>Is there a plugin that handles this?</li>
  <li>Am I missing something somewhere?</li>
  </ul>
  
  <p>Any help will be greatly appreciated.</p>