Ajax status is 200 but error event triggers instead of success

Question

Today I am facing a strange issue that I never faced before. My ajax call is returning response with 200 status but somehow it always trigger error event instead of success. This is what I am doing

$.ajax({
        type: "GET",
        url: "swap.php",
        data: "key=dbdcd39f0f8f5077e7308f3d3d5d8cac&code="+$("#code").val(),
        contentType: 'application/json; charset=utf-8',
        dataType:"json",
        beforeSend: function() {
                $("#msg").html("<img src='imgs/loading_circle.gif'/>");
        },
        success: function(result){
                alert(result);
        },
        error: function(xhr,status,error){
            alert(error.Message); // receiving Undefined message
        }
    });

PHP code of swap.php

<?php
header('Content-Type: application/json');
$resp["data"]="Record updated successfully";
print json_encode($resp);
?>

This is the response which I get when directly put the url in address bar

Below is the screenshot of chrome's network tab

No but response status is 200 and I am doing some database stuff which is also getting update successfully as per the parameters supplied. — maddy23285, Dec 26 '19 at 05:44
In jQuery .ajax(), if the dataType: 'json' setting is specified, server must return a valid JSON formatted String, else error is thrown. — Amit Sharma, Dec 26 '19 at 05:47
So, you mean this is not a valid json? {"data":"Record updated successfully"} — maddy23285, Dec 26 '19 at 05:49
No error getting the same response {"data":"Record updated successfully"} — maddy23285, Dec 26 '19 at 05:51
Yes that is the issue. I have done this many times before but never faced such issue. Even in same project I have many ajax calls requesting same server and all of them working fine. So corsserver is also not an issue here. — maddy23285, Dec 26 '19 at 05:57
this might be cross domain error as in your code I can see it is sending request as Options instead of get — Amit Sharma, Dec 26 '19 at 06:15
Resolved the issue by removing content and datatype from request headers. Corssorigin was not an issue because I have lot of ajax requests in same project requesting same server and haven't faced this issue before. But this is the first time I am doing GET operation with query string parameters. I always used form values before. — maddy23285, Dec 26 '19 at 06:24
Okay that’s sounds great. Can you make an upvote to my answer for my efforts — Amit Sharma, Dec 26 '19 at 06:29

score 2 · Answer 1 · answered Dec 26 '19 at 05:45

2

The response image you're showing not the actual request, it's a pre flight check, Check the Request method it's OPTIONS not the "GET" as what you are trying. it's just checking for the "CORS" in this request. Not the actual ajax call.

Check the actual request, just after this. You will find the error.

answered Dec 26 '19 at 05:45

BlackXero

880
4
17

Could you please tell me how to do that? I mean checking the request. – maddy23285 Dec 26 '19 at 05:47
And how it is getting response headers correctly if the case is what you are saying? If I change header type in serverside php the same thing reflects in chrome network tab. – maddy23285 Dec 26 '19 at 05:50
1

In the headers of this request, you see "Request Method: OPTIONS". That means the ajax is just verifying that if it can access the resource, just by some hand shake technique but not calling the actual request. so there will be 2 ajax calls. filter your request and check all the "XHR" request. you will find the 2 request in there. – BlackXero Dec 26 '19 at 05:51
Yes another one is also there with these stuffs : OPTIONS /45sde7r85d4s7e8r/swap.php?key=dbdcd39f0f8f5077e7308f3d3d5d8cac&code=3&_=1577339801702 HTTP/1.1 Host: xyz.com Connection: keep-alive Access-Control-Request-Method: GET User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36 Access-Control-Request-Headers: content-type Accept: */* Accept-Encoding: gzip, deflate Accept-Language: en-US,en;q=0.9 – maddy23285 Dec 26 '19 at 05:54
1

and what you see in response for the another request, also what's the status? – BlackXero Dec 26 '19 at 05:58
Ajax call is doing its work perfectly fine. I mean I am supplying some values to server and based on supplied values the DB is also getting update successfully. I don't know how to check the response here because every time it triggers error and in error.Message I am only getting Undefined message. – maddy23285 Dec 26 '19 at 05:59
1

console.log(xhr), the first parameter of error function and see what's happening there. – BlackXero Dec 26 '19 at 06:02
It says. Cross-Origin Read Blocking (CORB) blocked cross-origin – maddy23285 Dec 26 '19 at 06:07
1

That's it.. that's what the error is and that's why the error function is triggering. Now you need to resolve this, You can take a look here https://stackoverflow.com/questions/50873764/cross-origin-read-blocking-corb – BlackXero Dec 26 '19 at 06:09
since my goal is achieved. Could you please tell me any way to get this message from xhr, so that I can check for this CORB error, ignore it and proceed with further operation? – maddy23285 Dec 26 '19 at 06:13
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/204858/discussion-between-blackxero-and-maddy23285). – BlackXero Dec 26 '19 at 06:14
1

Resolved the issue by removing content and datatype from request headers. Corssorigin was not an issue because I have lot of ajax requests in same project requesting same server and haven't faced this issue before. But this is the first time I am doing GET operation with query string parameters. I always used form values before. – maddy23285 Dec 26 '19 at 06:24

Amit Sharma · Answer 2 · 2019-12-26T06:20:59.843

0

you can try passing custom headers

headers: {
            'Content-Type': 'application/json',
            "Accept": 'application/json',
        }

edited Dec 26 '19 at 06:20

answered Dec 26 '19 at 05:47

Amit Sharma

1,775
3
11
20

It worked by removing the content type and data type from request headers. Because I am working with query string parameters. – maddy23285 Dec 26 '19 at 06:26

Ajax status is 200 but error event triggers instead of success

2 Answers2