PHP Jquery Ajax call throws net::ERR_EMPTY_RESPONSE

ajaxgoogle-chromejqueryPHP

I have the following JavaScript code in the page. When the ajax call is made, I could see that the browser inspect/debugger section throws net::ERR_EMPTY_RESPONSE error. It works fine in localhost environment but throws above error in production.

In client side code,

<script>
$(document).ready(function(){
    $("#identityLinks a").on("click", function(){
    value = $(this).attr("id");
    if(value != "")
    {
        $.ajax({
            url:  "publish/updateUsersData.php",
            type: "POST",
            data: {receiverId: value},
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            dataType: "json",
            success: function(data) {
              //alert(data["result"]);
              console.log(data["result"]);
            },
            error: function(xhr, textStatus, errorThrown) {
               //alert(xhr +" "+ textStatus +" "+errorThrown);
               console.log(xhr +" "+ textStatus);
            }
        });
    }
    });
</script>

In Server-side code (PHP), I have the following code in updateUsersData.php:

<?php
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 01 Jan 1996 00:00:00 GMT');
header('Content-type: application/json; charset=UTF-8');
if(isset($_POST["receiverId"]))
{
    $receiver_id = trim($_POST["receiverId"]);
    $arr = array("result"=>$receiver_id);
    echo json_encode($arr); die();
    break;
}
else
{
    $arr = array("result"=>"No user data received. Error!");
    echo json_encode($arr); die();
    break;
}
?>

Do you think it's due to header with Expire calls or a bug in Jquery 1.9.1 version? I didn't find such errors when we were previous versions. Also, this code has not been updated for 5 months and browser errors creep just some time ago. Thanks for all your help and support.

Edit:

Status : This ISSUE is not resolved so far. Jquery AJAX experts' help needed. Anyone, please promote this question. Also, CORS is not responsible for this issue.

When clicking on the console in which the above error occurred, I was directly taken to this line in 

JQuery 1.9.1 where console error lines point to:

=> xhr.send( ( s.hasContent && s.data ) || null );

Also these ones are shown in console error mark:

=> transport.send( requestHeaders, done );

=> ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle 
   || handleObj.handler )
  .apply( matched.elem, args );

=> return typeof jQuery !== core_strundefined && 
(!e || jQuery.event.triggered !== e.type) ?
jQuery.event.dispatch.apply( eventHandle.elem, arguments ) : undefined;

Is jquery latest version responsible for this PROVISIONAL HEADERS ARE SHOWN error.

Best Answer

I believe your request is not classed as a "simple request" under the CORS specification:

http://www.w3.org/TR/cors/#simple-cross-origin-request-0

since you are setting a response header for Content-Type: application/json.

So your server will need to handle the preflight request, which involves setting some additional headers on both the request and response for the CORS request to be successful

Here is a good article on what you need to do - check out the bit under "not so simple":

http://www.html5rocks.com/en/tutorials/cors/

Related Topic