5

当我运行以下代码时：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Demo: GeoJSON</title>
        <script type="text/javascript" src="http://localhost/webserver/d3/d3.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">

            //Width and height
            var w = 500;
            var h = 300;

            //Define default path generator
            var path = d3.geo.path();

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            //Load in GeoJSON data
            d3.json("http://localhost/webserver/us-states.json", function(json) {

                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path);

            });

        </script>
    </body>
</html>

我收到以下错误：

XMLHttpRequest cannot load http://localhost/webserver/us-states.json. Origin null is not allowed by Access-Control-Allow-Origin.

这里出了什么问题，我该如何解决？我正在关注 Scott Murray 的书，到目前为止，在我开始使用 json 之前，我在访问我的网络服务器上的文件时没有遇到任何问题。

4

2 回答 2

7

出于安全原因，浏览器会阻止来自不同主机（来源）的 Ajax HTTP 请求 (XHR)。

该函数向您的http://localhost/d3.json("...")发出 Ajax 请求……您可能正在从不同的主机提供 HTML。

您是否在浏览器中将 .html 作为文件打开？那被认为是不同的主机。你有一些选择：

  • 从您提供 json 文件的同一 Web 服务器提供您的 HTML 文件
  • 将您的 .json 转换为 .js var mygeodata = {your json here}，在文件中添加类似内容并添加<script type="text/javascript" src="http://localhost/webserver/us-states.js"></script>HTML <head>，同时删除该d3.json("...")部分。之后，您将拥有一个包含数据的全局变量mygeodata
  • 配置您的 Web 服务器以允许 CORS。

如果您正在学习/原型（从外观上看），我会采用第二种方法。

于 2017-03-21T22:12:19.060 回答
1

派对很晚了，但是对于任何仍然有问题的人来说，使用 NPM 从包含您要服务器的所有文件的目录中设置一个http-server实例真的很容易。

您只需安装http-serverglobal npm i http-server -g，然后http-server从您的根目录运行。

服务器运行后，转到浏览器并输入以 . 为前缀的相对路径localhost:[port][/path/to/file]。当您在 repo/目录中第一次运行 http-server 时，将从命令行打印端口，并且相对路径以您运行 http-server 的目录开始。这将正确地为最终用户提供文件，而不仅仅是复制并粘贴到文本本地的链接。

于 2019-07-13T15:03:42.253 回答