title: CORS: Always get empty response from Mojolicious::Lite via jQuery.ajax
body: <p>I'm using jQuery to get some data from a <code>Mojolicious::Lite</code> API I'm building. But I can't receive any data from the API via Ajax. I can get data via <code>curl</code> though. </p>
  
  <p><strong>Update</strong>: I can get the data via Ajax when on same domain. It's a CORS issue.</p>
  
  <p>Here's my client code:</p>
  
  <pre><code>$.ajax({
    type: 'POST',
    url:  'http://localhost:3000/path',
    data: JSON.stringify({ foo: 'foo', bar: 'bar' }),
    dataType: 'json',
    contentType: 'application/json',
    beforeSend: function(xhr){
      xhr.setRequestHeader('Accept', 'application/json');
    }
  });
  </code></pre>
  
  <p>Here's the API code:</p>
  
  <pre><code>#!/usr/bin/perl -w
  
  use Mojolicious::Lite;
  use strict;
  
  options '*' =&gt; sub {
    my $self = shift;
  
    $self-&gt;res-&gt;headers-&gt;header('Access-Control-Allow-Origin'=&gt; 'http://localhost:7000');
    $self-&gt;res-&gt;headers-&gt;header('Access-Control-Allow-Credentials' =&gt; 'true');
    $self-&gt;res-&gt;headers-&gt;header('Access-Control-Allow-Methods' =&gt; 'GET, OPTIONS, POST, DELETE, PUT');
    $self-&gt;res-&gt;headers-&gt;header('Access-Control-Allow-Headers' =&gt; 'Content-Type, X-CSRF-Token');
    $self-&gt;res-&gt;headers-&gt;header('Access-Control-Max-Age' =&gt; '1728000');
  
    $self-&gt;respond_to(any =&gt; { data =&gt; '', status =&gt; 200 });
  };
  
  post '/path' =&gt; sub {
    return $_[0]-&gt;render( json =&gt; {hello =&gt; "world"} );
  };
  
  app-&gt;start;
  </code></pre>
  
  <p>And here are the headers and data from all requests:</p>
  
  <p><code>OPTIONS /path</code>:</p>
  
  <pre><code>Request headers:
  
  OPTIONS /path HTTP/1.1
  Host: localhost:3000
  User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:20.0) Gecko/20.0 Firefox/20.0
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
  Accept-Language: pt-br,en-us;q=0.7,en;q=0.3
  Accept-Encoding: gzip, deflate
  DNT: 1
  Origin: http://localhost:7000
  Access-Control-Request-Method: POST
  Access-Control-Request-Headers: content-type
  Connection: keep-alive
  Pragma: no-cache
  Cache-Control: no-cache
  
  Response headers:
  
  HTTP/1.1 200 OK
  Connection: keep-alive
  Access-Control-Allow-Headers: Content-Type, X-CSRF-Token
  Access-Control-Allow-Credentials: true
  X-Powered-By: Mojolicious (Perl)
  Date: Sun, 25 Nov 2012 14:45:19 GMT
  Access-Control-Allow-Origin: http://localhost:7000
  Access-Control-Allow-Methods: GET, OPTIONS, POST, DELETE, PUT
  Content-Length: 0
  Access-Control-Max-Age: 1728000
  Content-Type: text/html;charset=UTF-8
  Server: Mojolicious (Perl)
  </code></pre>
  
  <p><code>POST /path</code>:</p>
  
  <pre><code>Request headers:
  
  POST /path HTTP/1.1
  Host: localhost:3000
  User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:20.0) Gecko/20.0 Firefox/20.0
  Accept: application/json
  Accept-Language: pt-br,en-us;q=0.7,en;q=0.3
  Accept-Encoding: gzip, deflate
  DNT: 1
  Content-Type: application/json; charset=UTF-8
  Referer: http://localhost:7000/
  Content-Length: 24
  Origin: http://localhost:7000
  Connection: keep-alive
  Pragma: no-cache
  Cache-Control: no-cache
  
  Response headers:
  
  HTTP/1.1 200 OK
  Connection: keep-alive
  Content-Type: application/json
  X-Powered-By: Mojolicious (Perl)
  Date: Sun, 25 Nov 2012 14:45:19 GMT
  Content-Length: 17
  Server: Mojolicious (Perl)
  
  Request data: {"foo":"foo","bar":"bar"}
  Response data:
  </code></pre>
  
  <p>Don't know if the issue is on my JS or Perl code. </p>
  
  <p><strong>Update</strong>: Probably on the JS code. 
  <strong>Update</strong>: <strike>CORS seems to be OK.</strike></p>