Cross-domain Json post success in IE, Firefox and Chrome but reports an empty error on both Firefox and Chrome

Question

I am doing a cross-domain json post utilizing asp.net web api. On my service / server side I have the following method that response to the POST request:

// POST api/<controller>
public HttpResponseMessage Post(Customer newCustomer)
{
    DataClassesDataContext db = new DataClassesDataContext();
    var response = Request.CreateResponse<Customer>(HttpStatusCode.Created, newCustomer);

    db.Customers.InsertOnSubmit(newCustomer);
    db.SubmitChanges();

    string uri = Url.Link("DefaultApi", new { id = newCustomer.Id });
    response.Headers.Location = new Uri(uri);

    return response;
}

And on the client side, which run on a different port number (i.e. cross-domain), I am using the following jQuery code:

<body>

<input type="button" value="click me" onclick="hello()" />

<script type="text/javascript">
    function hello() {
        //SEE: http://stackoverflow.com/questions/5241088/jquery-call-to-webservice-returns-no-transport-error
        $.support.cors = true;

        //var jsonObjects = [{ Name: "Name1", CellphoneNum: 1234657911 }];

        $.ajax({
            url: "http://localhost:26037/api/customer",
            type: "POST",
            crossDomain: true,
            data: { Name: "Name321", CellphoneNum: 1234657922 },
            dataType: "json",

            success: function (result) {
                alert("Success");
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert('Thrown Error: ' + thrownError);
                alert('xhr status: ' + xhr.status);
            }
        });
    }
    </script>
</body>

My issue is that, from the client side, on IE the success alert message will be displayed and the data will be inserted to the database using the LINQ code in my POST method. However, using Chrome or Firefox the data will also get inserted to the database and LINQ code will be executed successfully but a message box with an empty string error and a 0 xhr status will be displayed.

Why is it only reporting an error on Firefox and Chrome while the data get posted and successfully processed in the server?

score 1 · Accepted Answer · answered Nov 03 '12 at 21:15

It looks like browsers don't do a good job at reporting xhr errors. The tutorials below may help you out. Also, if you haven't done so already, make sure to set the "Access-Control-Allow-Origin" header on the server side to the client domains you want to allow or "*" to allow all cross domain requests.

General CORS tutorial: http://www.html5rocks.com/en/tutorials/cors/

ASP.net and CORS: http://encosia.com/using-cors-to-access-asp-net-services-across-domains/

score 1 · Answer 2 · answered Nov 04 '12 at 13:34

To make cross domain call, I have added crossdomain.xml in web application root folder, when deployed on IIS. with cross domain.xml has following contents.

<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*"/>
</cross-domain-policy>

I hope that it will work your case as well.

Cross-domain Json post success in IE, Firefox and Chrome but reports an empty error on both Firefox and Chrome

2 Answers2