Access Control causing issues on different calls

Question

The problem is that I am doing two ajax calls to the same website but with different webpages. Both the webpages are publicly available but the one is giving me Access-Control-Allow-Origin problems.

Call 1:

$.ajax({
    type: 'GET',
    url: 'http://osrm.jrgold.me/ParkingAvailability.php',
    data: '',
    crossDomain:true,
    success: function (response) {

    response = JSON.parse(response);
        for (var i = 0; i < response.lots.length; i++) {
            $('#' + response.lots[i].lot).html(response.lots[i].space);
        }
    },
    error: function (req, status, err) {

    }
});

Call 2:

$.getJSON(url , function(result){

            var x = result.route_summary.total_time/60;
            var data = {timeValue: x };

            $.ajax({
                type: "GET",
                url: "http://osrm.jrgold.me/prediction.php",
                data: data,
                crossDomain:true,
                success: function (response) {
                    alert(response);
                },
                error: function (req, status, err) {
                    //alert(req[1] + " " +status + ": " + err); 
                }
            });
        });

Like I said Call 1 works fine, but call 2 does not? I want to confirm it is not a problem with the permissions on the pages before I contact the owner of the pages.

Answer 1

Response from prediction.php does not contain any Access-Control-Allow-Origin header. You can't work around that, it is in the competence of the site owner to allow or restrict the access to that resource.

More info in How does Access-Control-Allow-Origin header work? question.

Answer 2

Like mentioned above the problem is with the server, more specifically with the php file. To solve Access-Control-Allow-Origin one can simply add:

header('Access-Control-Allow-Origin: *');

To the top of the php file.