AJAX proxy using PHP and cURL
I'm in the middle of making a useful javascript-based web-app that needs to get some data from a well-known web-service that uses the REST API. The ideal way to get the data (in my case, some XML) is to use AJAX. Simple enough, right? Of course not.
Since the request URL is on a different domain (or sub-domain), the AJAX HTTPrequest object will throw the angering error 'Access to restricted URI denied' code: 1012. Which basically translates to "Sorry. You can't access remote data from any location outside of your current domain". It's a necessary security feature in browsers, but a sometimes frustrating problem for developing mash-ups or other web-apps.
Now, there are of course workarounds for this problem without using AJAX:
PHP code (file named 'remote_proxy.php' or whatever somewhere on your server):
Javascript code
See? Simple, clean, and on useful for multiple projects. Hopefully it will help someone somewhere with something. Let me know if it helps, or if you have any other solutions.
Now, about that option number 2....
Since the request URL is on a different domain (or sub-domain), the AJAX HTTPrequest object will throw the angering error 'Access to restricted URI denied' code: 1012. Which basically translates to "Sorry. You can't access remote data from any location outside of your current domain". It's a necessary security feature in browsers, but a sometimes frustrating problem for developing mash-ups or other web-apps.
Now, there are of course workarounds for this problem without using AJAX:
- You can use dynamic script tags and place them in the 'head' element of your document (created programmatically with javascript, preferrably by directly manipulating the DOM) and set the 'src' attribute to the remote URL. In the case that you are loading XML, you should also set the 'type' attribute of your script tag to 'text/xml' so you can immediately access the XML object via javascript. Check out iFormattable's blog entry or Mark McLaren's Weblog entry for more info on this solution.
This generally works just fine for most people, except when the URL is too long for the browser, or if the parameters passed need to be POST rather than GET. The problem I ran into with it is that I wanted to have access to the 'innerHTML' of that script tag to play around with the contents, but since it's not directly accessible to the Document Object Model (to the best of my knowledge), I couldn't.... stubborness, I know, but still... Ahhhhhh!!!! - You can perform the request using Flash or some other environment with its own security sandbox and spit the data back out to javascript using the Flash ExternalInterface command (or FScommand and getURL for older versions of Flash player). The process would look something like this:
- Embed the Flash object in your HTML (static or dynamic, doesn't matter)
- Create a javascript function that calls the ExternalInterface of the Flash object (or setVariable for older versions - not recommended) to trigger an event listener or fire a function in Flash and pass the remote URL and parameters
- Flash does its thing with the urlRequest object and retrieves the data
- The callback function for the completion of that urlRequest then calls the ExternalInterface again and sends the data back to javascript.
Of course, if this was packaged in an easy to use zip file bundled with a javascript class and some well-tested, lightweight libraries like SWFobject and Mootools or jQuery....hmmmmmm. - You could set up a server-side script to be a proxy for retrieving the data. This is the method I chose since it's easy, concise, and 'elegant'.
PHP code (file named 'remote_proxy.php' or whatever somewhere on your server):
$post_string = http_build_query($_POST);
$c = curl_init();
$url = $_GET['url'];
curl_setopt($c, CURLOPT_URL, $url);
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($c,CURLOPT_POSTFIELDS,$post_string);
$src = curl_exec($c);
curl_close($c);
echo $src;
Javascript code
function ajax_it(url, urlparams){
var time_qs = 'randtime=' + $time(); //Random time to keep fresh
var params = '';
for(i in urlparams){ //Loop through the pairs in urlparams object to create the POST string + escape the values
params += i + '=' + escape(urlparams[i]) + '&';
}
var ajax_result = new Request({ //do the AJAX request
url: 'http://yourserver.com/remote_script.php?url=' + escape(url),
method: 'post',
onComplete: function(response){
alert(response); //alert the response from the proxy
}
}).send(params);
}
ajax_it('http://someremoteserver.com/api/rest/', {param1:value1, param2:value2}); //Call it
See? Simple, clean, and on useful for multiple projects. Hopefully it will help someone somewhere with something. Let me know if it helps, or if you have any other solutions.
Now, about that option number 2....
0 Comments:
Post a Comment
Links to this post:
Create a Link
<< Home