cross-origin resource sharing (CORS) with jQuery and Tornado

Question

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.

So I set up my Tornado as such:

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")

And my javascript makes a jQuery call:

$.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;
    }
});

But I get the lovely XMLHttpRequest cannot load http://localhost:8899/load/space?src=dH8b. Origin http://www.othermachine.com is not allowed by Access-Control-Allow-Origin error. I can't tell which side of jQuery / Tornado (or both?) am I not setting up correctly.

According to dev tools, these are the headers the jQuery request is sending:

Request Headers

Accept:*/*
Origin:http://www.othermachine.com
Referer:http://www.othermachine.com/athletes.html?src=BCYQ&msgid=6xjb
User-Agent:Mozilla/5.0 ...

If I simply make a request from my browser's url field I get a '200 OK' with this:

Response Headers

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

Does that mean Tornado is doing its job? I tried to follow the advice of all the stackoverflow CORS+jQuery posts (e.g. this), 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.

I figured it out, see answer below; I'll mark it as soon as my 2 day time limit allows. — kradeki, Jul 13 '12 at 13:19
I met this problem too. But methods above cannot solve it for me. I use https://github.com/globocom/tornado-cors , and things works. — user1706079, Mar 01 '14 at 17:22

score 18 · Accepted Answer · answered Jul 13 '12 at 13:16

Nevermind, coding too late and too long causes one to trip over things the size of typos. For the record, this is all you need for jQuery:

var data = { msgid: "dH8b" },
    url = "http://localhost:8899/load" + '?' + $.param(data);
$.getJSON( url, function(resp){
    console.log("ajax response: "+resp+" json="+JSON.stringify(resp));
});

And this is all you need for Tornado:

class BaseHandler(tornado.web.RequestHandler):
    def set_default_headers(self):
        self.set_header("Access-Control-Allow-Origin", "http://www.othermachine.com")

Using jQuery 1.7.2, Tornado 2.2.1.

score -1 · Answer 2 · answered Jul 13 '12 at 05:17

-1

try setting origin to be: othermachine.com. it should be a domain name, not a website address

answered Jul 13 '12 at 05:17

fengd

7,551
3
41
44

origin has to be a FQDN including scheme and port. – bluesmoon Aug 25 '15 at 07:15

cross-origin resource sharing (CORS) with jQuery and Tornado

2 Answers2