Develop Reference

Cross-origin request blocked when using AJAX

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.

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!

Using AJAX to call a php function keeps failing

im having a problem trying to get an ajax call to trigger a php function and then return successfully. As far as i can see my syntax is correct.
But all i get back is failed! Any ideas?
EDIT
I have changed my AJAX request to send without using data, just to rule out that being a problem and i have implemented some of the things people suggested below but to no avail, heres what my 2 files look like now:
ship.js:
function set_ship()
{
//var datastring = {'ship':'true'};
$.ajax({
type:'POST',
url:'soap/classes/class.ship.php',
success: function(success){
alert('success');
},
error: function(fail){
console.log(fail);
}
});
}
And my PHP class.ship.php:
<?php
var_dump("hello");
header('Content-type: application/json');
echo json_encode(array("result"=>"true"));
From the var_dump on my PHP script i can see that the class.ship.php isnt even being called for some reason.
Thanks

Please try this
json_encode(array("result"=>"true"));
because
json_encode(true) // will return just "true" which is not a valid json
Also try serializing the dataString , by doing
data: datastring.serialize();

lowercase JSON_ENCODE
success: function(success), error: function(fail)
check what is returned in network tab of firebug.

You need to set the content header to json header('Content-type: application/json'); and make sure you request return only json coz ajax is waiting only for "JSON" and it will throw parse error
if(isset($_POST['ship']) && $_POST['ship'] == "true"){
$result = "result";
header('Content-type: application/json');
echo json_encode(true);
}

I would suggest that you check what it being actually returned by the server.
The error callback receives one argument representing the xhr object, so you can inspect that directly by placing a breakpoint or using console logging, like this
error: function(xhr) {
console.log(xhr);
}
Likewise, the success callback receives three parameters: the status, the returned data and the XMLHTTPRequest Object, so you can check those in the very same way:
success: function(status, data, xhr) {
console.log(status, data, xhr);
}
You should look for the response status code and the response text in the xhr object to understand what is going wrong. If you're seeing a 200 OK response status, the data returned from the server is probably not being interpreted correctly as JSON data, so you should try setting the response header server side to application/json.
An error might occur also if something else is appended or prepended to your response. This happens especially when warnings occur in the code before returning and you have error reporting set to ON.

Ajax call fires error event but returns 200 ok

$.ajax({
url: 'http://intern-dev01:50231/api/language',
type: 'GET',
dataType: 'json',
success: function() {
console.log('It Works!');
},
error: function (request,status, error) {
console.log(error);
alert(status);
}
});
Why do this ajax call not work ?? if i call in browser it works fine :/.
This is what fiddler returns:
HTTP/1.1 200 OK
Content-Length: 122
Content-Type: application/json; charset=utf-8
Server: Microsoft-HTTPAPI/2.0
Date: Fri, 26 Apr 2013 06:56:40 GMT
[{"LanguageId":1,"LanguageName":"Dansk"},{"LanguageId":2,"LanguageName":"Tysk"},{"LanguageId":3,"LanguageName":"Engelsk"}]

You have to check ajax response if it is valid or not. When you specify in ajax:
dataType: 'json',
jQuery will fire the error event if the response cannot be parsed as JSON, even if server returns 200 OK. Check the data returned from the server and make sure it is valid JSON (try JSONLint service).
If the returned data is not JSON or it has syntax errors then fix them in your server side code. You can just return {} from the server side script.
Also try this.
$.ajax({
url: 'http://intern-dev01:50231/api/language',
type: 'GET',
cache: false,
complete: function (xhr, status) {
if (status === 'error' || !xhr.responseText) {
console.log(error);
alert(status);
}
else {
console.log('It Works!');.
}
}
});

There is a parsing error since the status shows 200 OK. The problem lies in the datatype:json. To test this, remove the line and it should work. In order to fix this, you can change it to the datatype:text. See this link too for similar question

Check the url parameter and make sure its the same as the loaded page. You might be doing a cross-domain ajax call. If you were wanting to make a cross-domain ajax call, notice that the only dataTypes allowed to make cross-domain requests are "script" and "jsonp".
Ran into this issue in a dev environment where the URL was an IP address and the page loaded a domain-name pointing to that ip.

I know I'm a little late, but I just ran into the same problem and this is one of the top search results on Google. I managed to fix it by moving datatype above url like this:
$.ajax({
type: 'GET',
dataType: 'json',
url: 'http://intern-dev01:50231/api/language',
success: function() {
console.log('It Works!');
},
error: function (request,status, error) {
console.log(error);
alert(status);
}
});

If you are testing locally with a different web app and web API applications , then debug your application and test API send data correctly and app calls to API via AJAX and return data.
since domains are not similar when run application AJAX call doesn't hit to success function. because browser prevents Cross Site request. If you publish both app in local and debug , it's work fine.
hope this would be helpful someone.

Ajax in Codeigniter doesn't work for a specific controller in remote host

My web application does Ajax request to a Codeigniter-php code in a remote server. It works in localhost but not with a specific controller in remote host. It is strange because works in localhost for both controllers.
The request:
$.ajax({
async:true,
type: "POST",
dataType: "json",
url:"/CI/site/index.php/contact/submitContact",
data: "", //data example
success:arrived,
error:problems });
function arrived(data){
var dataJson = eval(data);
}
function problems(){
$("#result").text('Problems.');
}
I check the arrived with log_message. With the next function works fine:
function submitContact(){
log_message('error', 'submitContact. ');
//If data are received
if($_POST){
log_message('error', 'data. [application/controllers/contact.php]');
}
}
However, If I change the request to url:"/CI/site/index.php/control/controlHome", there isn't any log message and the output is the next:
POST http://www.page.com/CI/site/index.php/control/controlHome 500 (Internal Server Error)
The function /application/controllers/control.php is the next:
function controlHome(){
log_message('error', 'controlHome. [application/controllers/control.php]');
//If data are received
if($_POST){
log_message('error', 'data. [application/controllers/control.php]');
}
}
Also I've tried with complete url in the ajax code but the result is the same. Any setting is required?

Check this AJAX csrf protection with codeigniter 2. This solve my same problem
http://aymsystems.com/ajax-csrf-protection-codeigniter-20
UPDATE:
I checked your control.php file on my test server.
if($_POST) { /* i only commented gangway library functions */
} else { /* only replace the load->view with an print_r $data; and its work */ }
And put to comment the gangway library on construct. And control/controlHome works normaly without any error. Check your gangway library THAT's cause error 500.

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

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.

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.

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.)