How to Load External Data Into a Fiddle

If you attempt to load data from an external domain into a Fiddle you’re likely going to receive an XMLHttpRequest error that looks something like “Origin is not allowed by Access-Control-Allow-Origin”. You can use JSFiddle’s echo requests if you just want to simulate returning data, but sometimes you want to demonstrate an actual retrieval.

Legitimate security concerns regarding cross-site HTTP requests are the reason why you can’t simply read in any old file. However, using appropriate page headers makes accessing files from other domains possible. So, if we can set page headers in a file that returns our data, it should be accessible, right? Right!

This can’t be done using a JSON file, but it can be done in a PHP file that is setup to output JSON. The PHP code would look something like this:

<?php
// Allow access from anywhere. Can be domains or * (any)
header('Access-Control-Allow-Origin: http://fiddle.jshell.net');

// Allow these methods of data retrieval
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');

// Allow these header types
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

// Create our data object in that crazy unique PHP way
$arr = array(array("id" => 1, "character" => "Minstrel", "line" => "And Saint Attila raised the hand grenade up on high, saying, 'O Lord, bless this thy hand grenade, that with it thou mayst blow thine enemies to tiny bits, in thy mercy.' And the Lord did grin."));

// Return as JSON
echo json_encode($arr);
?>

Note that you don’t have to use PHP. You can use just about any server side scripting language; ASP, .NET, ColdFusion, Ruby, etc., as long as you set the headers properly.

Check out an example:
[iajsfiddle fiddle=”bNyqY” height=”200px” width=”100%” show=”result,html,js,css” skin=”default”]

4 thoughts on “How to Load External Data Into a Fiddle

  1. Would you compare this solution, which I rather like, to the one I blogged about using PHP to create a JSONP response?

    http://www.carolinamantis.com/wordpress/?p=29

    (oh, and note the pub date, please ignore my helping with PHP 4) 🙂

    I got comments to my article that indicate a preference for setting headers (either at the code level or at the web server config level), and I’m not really sure which is a better way.

    1. I wish I had run across your post earlier. It would have saved me a lot of time!

      As far as where to set the headers, I would say it depends. If you want all of your files to be accessible by the same domain(s) and you have the authority to modify the server config, it would make sense to do it there. If you only need a handful of files to be accessible, or if you have different files that will be accessed by different domains then a code level implementation would probably make the most sense.

      The answer would probably fall somewhere in between. Make server config changes where you can and fine tune at the code level where applicable.

Comments are closed.