Cross Domain AJAX Requests

Introduction

Now on the web AJAX calls are becoming more and more common, they can be very useful to create a better user experience on your web applications. But on most modern browsers they will block anycross domain AJAX calls mainly for security reasons and the fact that AJAX uses client side scripting which might not work on another domain. If you are using jQuery to make your AJAX calls you can't post data to another domain, but PHP can post data to other domains by using the cURL extension. So to get around the cross domain AJAX problem, post data to your own PHP page and let cURL post this to the required URL.

In this article I will show you how to use cURL to post data from a jQuery post.

Change The jQuery POST Function

In this tutorial I am going to use PHP cURL to post data to another domain.

In jQuery to make an POST AJAX call you use the following.

var data = "parameters=1&para=2";             

             $.ajax({
    url: "http://www.example.com/post_url.php",
    data: data,
    type: "POST",
    success: function(data, textStatus, jqXHR){
   console.log('Success ' + data);
    },
    error: function (jqXHR, textStatus, errorThrown){
   console.log('Error ' + jqXHR);
    }
  });

This will post 2 parameters to http://www.example.com/post_url.php, but when this is sent you will get cross domain AJAX errors which means you aren't allowed to POST data to a different domain.

To get round this we are going to post to a page on our domain and then use this page to post the data.

var data = "url=http://www.example.com/post_url.php&parameters=1&para=2";             

             $.ajax({
    url: "our_domain_url.php",
    data: data,
    type: "POST",
    success: function(data, textStatus, jqXHR){
   console.log('Success ' + data);
    },
    error: function (jqXHR, textStatus, errorThrown){
   console.log('Error ' + jqXHR);
    }
  });

Notice it is the same AJAX call but I have changed the URL to a page on our server and moved the previous URL into data as a separate parameter. This is so we can get in from our PHP page and use this URL parameter to post the data.

Create A PHP Page To Post Data

Create a new PHP file and paste the following into the file.

//set POST variables
$url = $_POST['url'];
unset($_POST['url']);

$fields_string = "";
//url-ify the data for the POST
foreach($_POST as $key=>$value) { 
 $fields_string .= $key.'='.$value.'&'; 
}
$fields_string = rtrim($fields_string,'&');

//open connection
$ch = curl_init();

//set the url, number of POST vars, POST data
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_POST,count($_POST));
curl_setopt($ch,CURLOPT_POSTFIELDS,$fields_string);

//execute post
$result = curl_exec($ch);

//close connection
curl_close($ch);

This will first grab the URL out of the POST variable and then save this in a local variable this is so we can use this to send the data to. We need to then remove the URL from the POST variable to make sure we don't send this through as well.

Then we can loop through the POST variable and create our own query string.

Now we use cURL to post the data through to the URL.

That's it we have performed a cross domain AJAX call using jQuery and cURL.