browsers send Options instead of Post after changing http header

Question

/*set the response header*/
    Form responseHeaders = (Form) getResponse().getAttributes().get("org.restlet.http.headers"); 
    if (responseHeaders == null) { 
        responseHeaders = new Form(); 
        responseHeaders.add("Access-Control-Allow-Origin", "*");
        responseHeaders.add("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
        getResponse().getAttributes().put("org.restlet.http.headers", responseHeaders); 
    } 

I added this in my restlet 2.0 code to allow for cross domain access, this does make the first GET to work on page load, but when I try to do POST later(with backbone model.save()), browser sends Options with a null entity instead.

It does send the right POST if I did not add the code above

This happens on Opera, Firefox, and Chrome (works fine if I start chrome with --disable-web-security), so i assume it is still a browser security issue, could anyone provide explanations on why this would happen and what might be the fix?

Answer 1

From What is the HTTP OPTIONS method?

This method allows the client to determine the options and/or requirements associated with a resource, or the capabilities of a server, without implying a resource action or initiating a resource retrieval.

I have fought several times with CORS issues and I have always solved them with the method of try and error my suggestion for your case is add OPTIONS to your Allow Methods :

"Access-Control-Allow-Methods": "POST, GET, PUT, DELETE, OPTIONS"

And make your server to respond to OPTIONS request with an *, in Sinatra is like this:

options "/*" do
  "*"
end

Update

For the new issue explained in the comment about the error header field Content-Type is not allowed by Access-Control-Allow-Headers.

Try to add another CORS header:

"Access-Control-Allow-Headers": "origin, x-requested-with, content-type"