jQuery .post is working but triggering .fail without any information

Question

I've got my data posting successfully but I'm not having any luck getting my .post response handler code to work. I get inconsistent results in the different browsers/tools I've tried. Here's the post code:

$.post(form.attr("action"), form.serialize(), "json")
   .done(function (response, textStatus, jqXHR) {
      alert('done');
   })
   .fail(function (jqXHR, textStatus, errorThrown) {
      // log the error to the console
      alert('responsetext:' + jqXHR.responseText + ', status:' + textStatus + ', error:' + errorThrown);
   })

In FireFox and Chrome it always goes to the .fail (even though the data is successfully posting) but the only item set is textStatus to "error". In Firefox when I try to view the response it just shows the Error, "SyntaxError: JSON.parse: unexpected end of data at line 1 column 1". In Chrome, in the Console I'm seeing this: "XMLHttpRequest cannot load http://example.net/applicationsvc/formprocessor/index.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.net' is therefore not allowed access." Which seems very relevant but my attempts to solve it haven't worked.

How can I resolve the Access-Control-Allow-Origin issue in a .post? Why aren't I getting any error data and why is FireFox unable to parse the response.

Using PostMan, and using the same headers and body, I do see I'm getting a response of:

{"successful":true,"thankyou_message":"<h2>Thank you!<\/h2><p>Thank you for signing up!<\/p>"}

But the code doesn't seem to be getting or handling that.

Here are the Request headers that are going out:

Host: example.net
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://example.net/mypage.htm
Content-Length: 655
Origin: http://example.net
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

UPDATE: I've now switched from the .post to .ajax

$.ajax({
    url: form.attr("action"),
    type: "POST",
    data: form.serialize(),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function () {
        alert('done');
    }
});

With that I get a consistent HTTP 501 Response.

Answer 1

If you are using cross domain then try with the JSONP instea

Your Code

$.ajax({
     url: form.attr("action"),
     method: "POST",
     headers: {"Access-Control-Allow-Origin":"*"},
     data: form.serialize(),
     dataType: "json",
     contentType: "application/json; charset=utf-8",
     success: function () {
         alert('done');
     }
});

Change it to

$.ajax({
    url: form.attr("action"),
    type: "POST",
    headers: {"Access-Control-Allow-Origin":"*"},
    data: form.serialize(),
    dataType: "jsonp",
    contentType: "application/json; charset=utf-8",
    success: function () {
        alert('done');
    }
});

Answer 2

try to enable cross-origin on the server, example in php

header("Access-Control-Allow-Origin: *");

the server must send this in the response header, change the star accordingly to your domain for security reasons.