2

我正在尝试从 github gist（美国地图）https://gist.github.com/4431123复制此示例 所需的文件“ us.json ”我复制到我的主目录。

这个网站上已经出现了类似的问题。

<!-- language: lang-html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: none;
  stroke: steelblue;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>

var width = 960,
    height = 500;

var path = d3.geo.path();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
d3.json("us.json", function(error, us) {
  svg.append("path")
      .attr("d", topojson.object(us, us.objects.counties).geometries.map(function(d) {
        var bounds = path.bounds(d);
        return "M" + bounds[0]
            + "H" + bounds[1][0]
            + "V" + bounds[1][3]
            + "H" + bounds[0][0]
            + "Z";
      }).join(""));
});

</script>

以下是我收到的错误消息：

XMLHttpRequest 无法加载 file:///C:/Users/work/Documents/d3js/us.json。仅 HTTP 支持跨源请求。

所以我尝试使用网络。

XMLHttpRequest 无法加载https://gist.github.com/raw/4090846/b8c888f35c42400a080ab03c31a7649e0b9bc9a8/us.json。Access-Control-Allow-Origin 不允许 Origin null。

搜索在StackOverflow上给了我这个问题，暗示这是 Chrome 试图从我自己身上拯救我。

4

1 回答 1

5

您遇到了相同的源策略，它只允许使用相同的协议从一个页面对相同的主机和端口进行 AJAX 调用。为了解决这个问题，您可以使用 Python 在您正在使用的目录中运行 Web 服务器：

$ python -m SimpleHTTPServer 8080

您现在可以http://localhost:8080在 Web 浏览器中访问您的页面，并且 AJAX 调用现在应该可以工作了。

于 2013-01-06T07:10:55.967 回答