No 'Access-Control-Allow-Origin' header is present on the requested resource Error when loading JSON file

Question

My dataset is hosted on my dropbox account but not the Javascript files calling it. I am working with D3 and Polymaps to visualize the data, however I get an error saying - "XMLHttpRequest cannot load https://www.dropbox.com/s/89adzt973quosda/solaruse.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access." (the link to the dropbox file works so you can have a look see)

Here is the code I used to load the JSON file (I am developing the site locally) I'm not exactly sure what to do from this point.

var po = org.polymaps;
        //Create map object, append to #map
        var map = po.map()
            .container(d3.select("#map").append("svg").node())
            .zoom(4)
            .add(po.interact());
        // Add the CloudMade image tiles as a base layer…
        map.add(po.image()
            .url(po.url("http://{S}tile.cloudmade.com"
            + "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
            + "/998/256/{Z}/{X}/{Y}.png")
            .hosts(["a.", "b.", "c.", ""])));
        // Add the compass control on top.
        map.add(po.compass()
            .pan("none"));
        // Add the custom locations/acres
        d3.json("https://www.dropbox.com/s/89adzt973quosda/solaruse.json", function(data){
            // Insert layer beneath the compass.
            var layer = d3.select("#map svg").insert("svg:g", ".compass");
            // Add an svg:g for each Name.
            var marker = layer.selectAll("g")
                .data(d3.entries(data))
                .enter().append("svg:g")
                .attr("transform", transform);
            // Adding the circles
            marker.append("svg:circle")
            //function scraping the acres from the dataset
            .attr()
        });

Answer 1

Problem

This is happening because Dropbox doesn't allow cross origin requests through their normal domain. See the MDN CORS docs for more info on cross origin requests.

Solution

You should be able to use the Dropbox HTTP api (specifically the get file resource). Or, you can use the Dropbox JS api if you want to use JS functions instead of http requests.

Or, as you have mentioned in the comments, you can simply avoid dropbox all together by hosting your own JS files 😁