I have two development sites call api.localhost and game.localhost. Both are running from an old version of Apache which is the same as the one running on the physical server so I don’t want to change it unless I have to. I am also running an old version of PHP (again don’t want to update it unless I have to).
The issue is if I run a test page (reproduced below) on api.localhost it works fine. If I run the same page on game.localhost then it fails. At first I thought the failure was due to jquery.jsonrpc which is what I was using at the time so I reduced to to just using jQuery ajax calls. I reduced the response of the index.php file I was calling to a simple correct generic jsonrpc response. The actual ajax call comes from another SO question. The firebug console surprisingly says 200 OK after a red string of the requestand there is no response below it.
Things I have looked at:
- Both sites have the same version of jquery on it.
- The virtual hosts look okay. They only differ in the respect that the error log filenames are different.
- There are nothing in the error logs except a lot of favicon errors.
- The hosts file looks okay. Nothing unusual in there.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
<head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: 'http://api.localhost/index.php',
data: JSON.stringify({jsonrpc:'2.0',method:'add', params:[1400,2100],id:"jsonrpc"}), // id is needed !!
type:"POST",
dataType:"json",
success: function (result) {
alert("ok");
},
error: function (err,status,thrown) {
alert ("this syntax sucks!! " + " ERROR: " + err + " STATUS: " + status + " " + thrown );
},
complete: function (xhr,status) {
alert('Complete=> showing status as: '+ status);
data = $.parseJSON(xhr.responseText);
alert (data);
}
});
});
</script>
test
</body>
</html>
api.localhost/index.php
<?php
print '{"jsonrpc": "2.0", "result": 19, "id": 1}';
?>
What is preventing the request from going ahead and being serviced?
Same origin policy prevents you from making AJAX calls between subdomains.
You can try adding this line to allow cross-subdomain requests:
Another way is to use JSONP to get around the same origin policy.