Google App Engine and CORS

Question

I have a simple app (java servlet) hosted on GAE. The app returns json data. I have set the header info as following in the servlet:

resp.setContentType("application/json");
resp.setHeader("Access-Control-Allow-Origin", "*");
resp.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
resp.setHeader("Access-Control-Allow-Credentials", "true");

Here's the header info when I go to the URL directly on the app engine:

Request Method:GET
Status Code:200 OK
Request Headersview source
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Host:---------.appspot.com
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.19 (KHTML, like Gecko)         Chrome/18.0.1025.162 Safari/535.19
Response Headersview source
Access-Control-Allow-Credentials:true
Access-Control-Allow-Methods:GET, POST, OPTIONS
Access-Control-Allow-Origin:*
Cache-Control:private
Content-Encoding:gzip
Content-Length:340
Content-Type:application/json; charset=ISO-8859-1
Date:Sat, 28 Apr 2012 19:14:58 GMT
Server:Google Frontend
Vary:Accept-Encoding

But when I try to access the url from a different domain I get the following response:

Request Method:OPTIONS
Status Code:500 Internal Server Error
Request Headersview source
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:origin, x-requested-with, accept
Access-Control-Request-Method:GET
Connection:keep-alive
Host:----------.appspot.com
Origin:http://--------------.com
Referer:http://-------------.com/map/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.162 Safari/535.19
Response Headersview source
Content-Length:466
Content-Type:text/html; charset=UTF-8
Date:Sat, 28 Apr 2012 19:15:14 GMT
Server:Google Frontend

here is the exact error:

XMLHttpRequest cannot load http://----------.appspot.com/Locations. Origin http://-------------.com is not allowed by Access-Control-Allow-Origin.

The code that tries to access the GAE url looks like this:

$.getJSON("http://---------appspot.com/Locations",function(result){
    for (i=0; i < result.length; i++)

Any help would be much appreciate it.

Answer 1

You need to override standard HttpServlet.doOptions() method to support proper pre-flight request processing.

@Override
protected void doOptions(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException 
{ 
    // pre-flight request processing
    resp.setHeader("Access-Control-Allow-Origin", "*");
    resp.setHeader("Access-Control-Allow-Methods", SUPPORTED_METHODS);
    resp.setHeader("Access-Control-Allow-Headers", SUPPORTED_HEADERS);
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException 
{
   resp.setHeader("Access-Control-Allow-Origin", "*");
   resp.setContentType("application/json");

   // implementation...
}

A great article explaining CORS with examples can be found here.

Answer 2

Looks like your request is failing early, on a preflight request, because the server responses with 500 (it should respond with 200 + specific headers) when being requested OPTIONS <URL>.

You might want to check out HTML5rocks tutorial on CORS, specifically Adding CORS support to the server, where preflight request is explained (the OPTIONS <url> request, on which your app fails to reply with 200 + required headers).