title: cross-origin resource sharing (CORS) with jQuery and Tornado
body: <p>Let's say, I have a Tornado web server (localhost) and a web page (othermachine.com), and the latter contains javascript that needs to make cross-domain ajax calls to the Tornado server.</p>
  
  <p>So I set up my Tornado as such:</p>
  
  <pre><code>class BaseHandler(tornado.web.RequestHandler):
      def set_default_headers(self):
          self.set_header("Access-Control-Allow-Origin", "http://www.othermachine.com")
          self.set_header("Access-Control-Allow-Credentials", "true")
          self.set_header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS")
          self.set_header("Access-Control-Allow-Headers",
              "Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, X-Requested-By, If-Modified-Since, X-File-Name, Cache-Control")
  </code></pre>
  
  <p>And my javascript makes a jQuery call:</p>
  
  <pre><code>$.ajax({
      type: 'GET',
      url: "http://localhost:8899/load/space",
      data: { src: "dH8b" },
      success: function(resp){
          console.log("ajax response: "+resp);
      },
      dataType: 'json',
      beforeSend: function ( xhr ) {
          xhr.setRequestHeader('Content-Type', 'text/plain');
          xhr.setRequestHeader('Access-Control-Request-Method', 'GET');
          xhr.setRequestHeader('Access-Control-Request-Headers', 'X-Requested-With');
          xhr.withCredentials = true;
      }
  });
  </code></pre>
  
  <p>But I get the lovely <code>XMLHttpRequest cannot load http://localhost:8899/load/space?src=dH8b. Origin http://www.othermachine.com is not allowed by Access-Control-Allow-Origin</code> error. I can't tell which side of jQuery / Tornado (or both?) am I not setting up correctly.</p>
  
  <p>According to dev tools, these are the headers the jQuery request is sending:</p>
  
  <p><strong>Request Headers</strong></p>
  
  <pre><code>Accept:*/*
  Origin:http://www.othermachine.com
  Referer:http://www.othermachine.com/athletes.html?src=BCYQ&amp;msgid=6xjb
  User-Agent:Mozilla/5.0 ...
  </code></pre>
  
  <p>If I simply make a request from my browser's url field I get a '200 OK' with this:</p>
  
  <p><strong>Response Headers</strong></p>
  
  <pre><code>Access-Control-Allow-Credentials:true
  Access-Control-Allow-Headers:Content-Type, User-Agent, X-Requested-With, X-Requested-By, Cache-Control
  Access-Control-Allow-Methods:GET,POST
  Access-Control-Allow-Origin:http://www.othermachine.com
  Content-Length:0
  Content-Type:text/html; charset=UTF-8
  Server:TornadoServer/2.2.1
  </code></pre>
  
  <p>Does that mean Tornado is doing its job? I tried to follow the advice of all the stackoverflow CORS+jQuery posts (e.g. <a href="https://stackoverflow.com/questions/5584923/a-cors-post-request-works-from-plain-javascript-but-why-not-with-jquery">this</a>), to no avail. CORS in concept seems simple enough, but maybe I am fundamentally misunderstanding what is supposed to happen in a CORS transaction... please help!  Thanks in advance.</p>