CORS - Using AJAX to post on a Python (webapp2) web service

Question

This is going to be long:

Ok so I\'m developing a google calendar gadget which sends requests to a Python webapp2 REST api hosted on Google App Engine.

The p

Answer 1

Ok I fixed it.

First of all I realized here that the headers were sent by the server so I was doing wrong when sending those headers in the AJAX request.

Finally, after searching around the worldwide web I found what I was missing. It was something stupid. I found the page that fixed it all:

http://enable-cors.org/server_appengine.html

So finally everything looks like this:

$.ajax({
    type: "POST",
    url: "https://myapp.appspot.com/service",
    contentType: "application/json; charset=utf-8",
    data: data,
    success: function(data) {
        alert("AJAX done");
    }
});  

And in the webService:

class webService(webapp2.RequestHandler):

    def get(self):      
        self.response.headers.add_header('Access-Control-Allow-Origin', '*')
        self.response.headers['Content-Type'] = 'application/json'
        # do something

    def post(self):     
        self.response.headers.add_header('Access-Control-Allow-Origin', '*')
        self.response.headers['Content-Type'] = 'application/json'
        # do something

    def options(self):      
        self.response.headers['Access-Control-Allow-Origin'] = '*'
        self.response.headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept'
        self.response.headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, DELETE'

Answer 2

Can simpler with dispatch method

class BaseRequestHandler(webapp2.RequestHandler):
    def dispatch(self):
        self.response.headers.add_header('Access-Control-Allow-Origin', '*')
        self.response.headers.add_header('Access-Control-Allow-Headers', 'Content-Type')
        webapp2.RequestHandler.dispatch(self)

class LoginHandler(BaseRequestHandler):
    def login(self):
        #code here

Answer 3

I just want to point out a detail that might help others:

Browsers differ in how they handle the "Access-Control-Allow-Orgin" header. For example, I found that Chrome blocks cross domain posts when the header value is a wildcard (*) as in the solution code above. It considers it too liberal and wants a specific origin. Yet, other browsers such as IE and FireFox did not care.

So if you want to build a cross browser solution it would be best set the value of "Access-Control-Allow-Origin" to the Origin value sent with the request.

If you're using SSL then you'll encounter some other differences that will need to be tested as well.

And if you need a lightweight solution this can all be done with POJS (plain-old-JavaScript) without resorting to jQuery. Just wire up the window.XDomainRequest for IE8+ and the window.XMLHttpRequest for other browsers and you're in business.