Is is possible to make a cross domain POST ajax re

Question

I am testing some csrf stuff, and I am wondering if it is possible to POST a cross domain ajax request with Content-Type: application/json

Every time I try to do this with jQuery:

  $.ajax({
    type: "post",
    url: "http://someotherdomain.com/endpoint",
    contentType: "application/json; charset=UTF-8",
    data: {"a": "1"},
    dataType: "json",
    crossDomain: true,
    success: function(data){ alert(data); }, 
    failure: function(data){ alert(data); }
  });

I always send HTTP OPTIONS requests instead of HTTP POSTs.

Note- that I don't care about receiving data back, a one way post is all I need.

Note- that the content-type can't be x-www-form-urlencoded and it can't be a GET request either.

Answer 1

It is possible if your browser supports so called Cross-Origin Resource Sharing (CORS), and all modern browsers, support this nowadays. In short, server should provide you Access-Control-Allow-Origin header.

Also, regarding the fact that, as you've said, you does not bother about getting any information as response, why don't you just submit some form?

Answer 2

The Content-Type: application/json header is not a simple header, and therefore first requires a preflight request before the actual request. The HTTP OPTIONS request you are seeing is the preflight request. From the CORS spec (http://www.w3.org/TR/cors/):

A header is said to be a simple header if the header field name is an ASCII case-insensitive match for Accept, Accept-Language, or Content-Language, or if it is an ASCII case-insensitive match for Content-Type and the header field value media type (excluding parameters) is an ASCII case-insensitive match for application/x-www-form-urlencoded, multipart/form-data, or text/plain.

In order to get past the preflight request, the server needs to respond to the OPTIONS request with the following headers:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE
Access-Control-Allow-Headers: Content-Type

Once the browser receives this response, it will make the actual HTTP POST request. Note that if your request contains additional custom headers, you will need to include them in the Access-Control-Allow-Headers response header. You can learn more about CORS preflight requests here:

http://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server