Cross-origin request blocked when using AJAX

Question

Hey I just installed script on same host, twice, just different accounts. The scripts worked fine, but for random reason, one of them started to drop all AJAX requests, and print the following messsage in Mozilla:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.yoursite.com/vote/ajax/xmlhttp/claim. This can be fixed by moving the resource to the same domain or enabling CORS.

When I access the link directly, works fine, but with AJAX it just fails.. on the other account (host account) it works fine so far.

On my VPS and pc it works fine.

In PHP error log, it prints undefined variables, which is not really possible, how can AJAX affect this, especially in this random situation, where it works and sometimes now on this host.

My JS:

    var reward = $("#rewards ul li");
    var selected = [];
    var limit = <?php echo $limit; ?>;
    var errors = $(".error");
    var timeout;

    console.log(limit);

    $("#claim").click(function() {
        $("#claim").text('Checking...');
        if ($("#username").val() == "") {
            $("#claim").text('Claim my reward(s) now');
            showError("Fill in your in-game username.");
            return;
        }
        if (selected.length == limit) {
            $.ajax({
                type: "POST",
                url: "<?php echo $post_url; ?>",
                data: {username: $("#username").val(), rewards: JSON.stringify(selected)},
                success: function(data) {
                    $("#claim").text('Claim my reward(s) now');
                    if (data.substr(0, 6) == 'error:') {
                        showError(data.substr(6));
                    }
                    else {
                        $("#claim").text('Success!');
                        $(".section").html(data);
                    }
                }
            });
        }
        else {
            showError("You must select " + limit + " rewards(s) to continue.");
        }
    });

Let me know if you need the functions I used too.

What is causing this problem?

I tried adding the following response:

if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');    // cache for 1 day
}

But it's bad because it will still have undefined variables in it, and still process the response which will cause JavaScript syntax errors.

Thanks in advice.

Cross-origin requests aren't allowed without proper CORS headers. What exactly do the headers look like (from the browser developer console)? — Pointy, Jun 17 '14 at 17:44
try adding `crossDomain:true` in the Ajax under `type` or `url` — Ofir Hadad, Jun 17 '14 at 17:46
None of these option helped, getting the same problem. @Unlink same problem, sending page with syntax errors. — Artemkller545, Jun 17 '14 at 18:10

score 1 · Answer 1 · edited May 23 '17 at 12:23

if i understood you right you are trying to pass data between to different servers; the answer to this is JSONP, it works like JSON but should pass that CORS problem. to do so you need to change a little bit your php code and ajax code.

in php you need to wrap the JSON data in a callback and in AJAX you need to define - dataType: "jsonp", read more about jsonp here: What is JSONP all about?. it worked for me!

Cross-origin request blocked when using AJAX

1 Answers1