Ajax post always results in error, even though everything seems correct

Question

I'm trying to process captcha in form validation using google's reCaptcha. Basically, my validation function is called using onSubmit in the form tag, and then calls a second function to work with the recaptcha api.

Here's the code:

        var returnValue;

        var myData = {
            privatekey  : "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            remoteip : ip,
            challenge : challenge,
            response : response
        };

        $.ajax({
            url: "http://www.google.com/recaptcha/api/verify",
            type: "POST",
            data: JSON.stringify(myData),
            dataType: "text",
            success: function(data) {
                var result = data.split("\n");
                if (result[0] == "true") {
                    returnValue = true;
                }
                else {
                    returnValue = false;
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert("There was an error submitting the captcha.  Please contact an administrator. \n\nError:\n" + textStatus, errorThrown);
                returnValue = false;                    
            },
            complete: function(jqXHR, textStatus) {
                return returnValue;
            }
        });

Using LiveHTTPHeaders in firefox, I can see the request go out to the service, and it looks like everything is being sent correctly. I get an HTTP/1.1 200 OK response back, and yet every single time the code goes to the error function. When the error function runs, jqXHR is:

Object { readyState=0, status=0, statusText="error"}

textStatus is "error", and errorThrown is ""

I've tried doing this a number of ways, including $.POST, and using .done(), .fail(), .always(), and it always behaves the same.

I've seen some other postings here having to do with problems with cross-domain requests, but none of those situations really seem to be relevant, because I actually am doing a cross-domain request, and those seemed to be issues where they were making requests to a file on the same domain, and it was being handled incorrectly as a cross-domain request.

I'm at my wits end here.. any help would be greatly appreciated.

you probably shouldn't post your private key in an SO question. — jbabey, Oct 08 '12 at 20:15
A side-note on: `I've tried doing this a number of ways, including $.POST, and using .done(), .fail(), .always(), and it always behaves the same.` Those 3 methods are serving the same purpose as error, success and complete. There should functionally be now difference, except they are now preferred in preparation of success, error and complete going to be deprecated in the future according to the documentation. — Nope, Oct 08 '12 at 21:56

score 2 · Accepted Answer · answered Oct 08 '12 at 20:24

I've seen some other postings here having to do with problems with cross-domain requests, but none of those situations really seem to be relevant, because I actually am doing a cross-domain request

When I run that code I get the error:

XMLHttpRequest cannot load http://www.google.com/recaptcha/api/verify.
Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

So it is a cross-domain issue. You might want to make a cross domain request, but Google isn't set up to allow it.

I'm pretty sure that recaptcha needs to be implemented with server side code. If you do it entirely on the client with JS then the client can lie and say it has passed the captcha when it hasn't.

thanks for the info. I never saw that error, but I ended up implementing a different type of captcha. I'd love to use something server side, but the site I'm trying to add this to is just pure html and I don't want to have to redesign the whole thing :/ (plus the client doesn't want to pay that much, lol). — Redit0, Oct 09 '12 at 20:40

score 0 · Answer 2 · edited May 23 '17 at 11:43

function check(){
    $.post('check.php',{
        'check':1,
        'challenge':$('#recaptcha_challenge_field').val(),
        'response':$('#recaptcha_response_field').val()},
        function(a){
            console.log(a);
        });
}

check.php:

if($_POST){
    if(isset($_POST['check'])){
        $url = 'http://www.google.com/recaptcha/api/verify';

        $data = array(
            'privatekey'=>  "**********************************",
            'remoteip'  =>  $_SERVER['REMOTE_ADDR'],
            'challenge' =>  $_POST['challenge'],
            'response'  =>  $_POST['response'],
        );
        $options = array(
            'http' => array(
                'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
                'method'  => 'POST',
                'content' => http_build_query($data),           
            ),
        );
        echo print_r($data,true);
        die(file_get_contents($url, false, stream_context_create($options)));
    }
}

Warning: You have only one choice to check! (Ref.)

Ajax post always results in error, even though everything seems correct

2 Answers2