No result when sending POST request to Google App Engine through JQuery

Question

I'm trying to send a POST request to my GAE app through JQuery AJAX but I get no response data back. I have a very simple servlet that simply echo the "msg" I pass in. Also overriding doOptions.

@Override
 protected void doOptions(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException 
 {
     resp.setHeader("Access-Control-Allow-Origin", "*");
     resp.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
     resp.setHeader("Access-Control-Max-Age", "1728000");
 }

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException 
 {
  resp.setContentType("text/javascript");
  resp.setCharacterEncoding("utf-8");

  String msg = req.getParameter("msg");
  resp.getWriter().print(msg);
 }

Here is how I called through JQuery AJAX

var parameters = {msg:"hello"};
$.ajax({
  type: 'POST',
  url: service_url,
  data: parameters,
  success: successhandler,
  error: errorhandler
 })

If I look at my interaction through FireBug, I see this.

First, JQuery sends out an OPTIONS request

Host lessondesigner.appspot.com
User-Agent Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language en-us,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive 115
Connection keep-alive
Origin lessondesigner.appspot.com
Access-Control-Request-Me... POST

Access-Control-Allow-Orig... *
Access-Control-Allow-Meth... GET, POST, OPTIONS
Access-Control-Max-Age 1728000
Date Mon, 06 Sep 2010 01:11:56 GMT
Content-Type text/html
Server Google Frontend
Content-Length 0

Next sending out the POST request

Host lessondesigner.appspot.com
User-Agent Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
Accept application/json, text/javascript, */*
Accept-Language en-us,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive 115
Connection keep-alive
Content-Type application/x-www-form-urlencoded; charset=UTF-8
Referer lessondesigner.appspot.com/testAjax.html
Content-Length 21
Origin lessondesigner.appspot.com
Pragma no-cache
Cache-Control no-cache

Content-Type text/javascript; charset=utf-8
Content-Encoding gzip
Date Mon, 06 Sep 2010 01:11:56 GMT
Server Google Frontend
Cache-Control private, x-gzip-ok=""
Content-Length 25

However, I get nothing back in the response! It works fine if I use Curl.

curl -d "msg=hello" lessondesigner.appspot.com/lessondesigner

I get back

"hello"

Does anyone know why this is? Also, why is JQuery doing an OPTIONS request first? It's not even cross domain.

Answer 1

Try flushing the writer

Answer 2

Figured out. It's a Cross-Origin Resource Sharing issue. Here's a great article on it.

http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/

Basically if a HTTPRequest header contains an "origin" field, the server must reply with a "Access-Control-Allow-Origin" response. In my case, I was doing it in the OPTIONS request but not doing it in the POST request. Therefore firefox was not returning my content data. To fix it, I have to do this.

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
{

resp.setHeader("Access-Control-Allow-Origin", "*");
resp.setContentType("text/javascript");
resp.setCharacterEncoding("utf-8");

String msg = req.getParameter("msg");
resp.getWriter().print(msg);

}