What factors would cause jquery.ajax to consider the response to be error, every time

Question

Front end:

<script type="text/javascript">
jQuery("#FormButtonRun").click(function(event){
    submitEmailForm();
});

var submitEmailForm = function ()  {
    var submitdata = {'Email':jQuery('#FormEmail').val(), 'fName':jQuery('#FormName1').val(), 'lName':jQuery('#FormName2').val(), 'listnews':"Yes"};

    jQuery.ajax({
        type:'POST',
        url:'https://dev.formserver.com/ajax.php',
        data:submitdata,
        success: submitwrkd,
        error: submitfaild,
        dataType:'json'
    });
}

var submitwrkd = function(response, more, xhr){
    alert("It worked!);
    alert(response.msg);
}

var submitfaild = function(response, more, xhr){
    alert("allegedly that failed");
}

backend: ajax.php:

<?php
header('Content-type:application/json');
echo json_encode(array('success'=>true, 'msg'=>'It was a success'));
?>

Content-Control-Allow-Origin is set to * on both content-server and posted-to server

Full Headers:

POST /ajax.php HTTP/1.1
Host: dev.dataserver.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:51.0) Gecko/20100101 Firefox/51.0
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: https://dev.dataserver.org/popuptest
Content-Length: 127
Origin: https://dev.contentserver.org
Connection: keep-alive
Email={removed post data}

Response:

HTTP/1.1 200 OK
Server: nginx/1.8.1
Date: Tue, 16 May 2017 00:44:49 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST

Data: {"success":true,"msg":"It was a success"}

The button successfully triggers the submission
The target server log file show the request and response "POST /ajax.php HTTP/1.1" 200 67 "-" "Mozilla/5.0 ...
The browsers develop tools show a response: http code:200, response content is recognized as json: success: true, msg: 'It was a success'

The javascript alert announces: allegedly that failed

I have checked the content-control headers Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: POST; and obviously its going through, the data types, json errors, javascript errors (none thrown), different browsers...

How can I get it to run the defined success function when it succeeds, and the error function when something goes wrong?

I can fall back to .done(), but there is a strong preference for knowing that it worked.

`Access-Control-Allow-Origin: *` right, and `Access-Control-Allow-Methods POST` no `:` ... but assuming that's just a typo in the question, these Access-Control-Allow-* headers are definitely being sent by the server? your backend php code doesn't show that is the case, though I'm sure there's other ways to add such headers for every request. Can you post **ALL** the request headers and **ALL** the response headers you are seeing in the browser developer tools network tab for this request — Jaromanda X, May 16 '17 at 00:38
`Content-Control-Allow-Origin` - that's a typo right, should be `Access-Control-Allow-Origin` like later in the question — Jaromanda X, May 16 '17 at 00:39
Good catch! I copied and pasted the wrong line from the server. The requests are made via POST and the headers are formatted correctly despite my hasty typing — ppostma1, May 16 '17 at 00:40
all good, can you add all request and response headers ... are you seeing an `OPTIONS` request prior to the `POST` at all? — Jaromanda X, May 16 '17 at 00:41
Chrome breaks down the json response data and runs the failed function, Firefox development tools now say "JSON.parse: unexpected end of data at line 1 column 1 of the JSON data" — ppostma1, May 16 '17 at 00:58
I'm going to add length headers and make sure no misc. characters are getting through — ppostma1, May 16 '17 at 00:59
in `submitfaild` - the arguments should be `jqXHR, textStatus, errorThrown` (you can call them what you like, but that's what you are getting) - so, console.log the `errorThrown` argument (which you've called `xhr`) to see what jQuery is choking on — Jaromanda X, May 16 '17 at 01:09
"error", Object { ...functions... status: 0, readySate:0, responseText:"", statusText:"error"} — ppostma1, May 16 '17 at 01:34
huh. increase the log levels and I get this: 21:40:00.196 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dev.dataserver.org/ajax.php. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘dev.contentserver.org’). 1 (unknown) — ppostma1, May 16 '17 at 01:48
hidden character in the response header before `*`. I would have expected a different error than that. — ppostma1, May 16 '17 at 01:53
well that is odd ... clearly you are receiving that header if your **Response:** text is correct - it's almost like there's credentials involved, which would require `Access-Control-Allow-Origin: dev.contentserver.org` rather than `*` — Jaromanda X, May 16 '17 at 01:54
Since it is a CORS request with application/json content-type (should be preflighted(?)), could it be http://stackoverflow.com/questions/38998684/cant-send-a-post-request-when-the-content-type-is-set-to-application-json ? — le_m, May 16 '17 at 02:42

score 0 · Accepted Answer · answered May 26 '17 at 19:53

Invalid ajax call parameters
Missing the Access-Control-Allow-Origin headers on target or origin servers
Incorrect Access-Control headers on target or origin
Corrupted headers (eg: invalid domain/origin name, or Access-Control-Allow-Origin: '*)
Invalid response headers or content stream from target server
Adblocking the source or target domains
Javascipt is loaded off a 3rd server, CDN (CDN requires its domain headers set, and the targeted server set to the CDN as an origin)
Using an outdated ajax framework (older jquery, scriptaculous, or prototype) that doesn't work properly with the current browsers Access-Control

What factors would cause jquery.ajax to consider the response to be error, every time

1 Answers1