Question

当我运行以下代码时：

<!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。

Answer 1

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

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

您是否在浏览器中打开.html文件？这被认为是另一个主机。你有一些选择：

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

如果你正在学习/原型（通过它的外观）我会采用第二种方法。

Answer 2

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

您只需在全局http-server上安装npm i http-server -g，然后从根目录运行http-server。

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

Access-Control-Allow-Origin不允许使用null。

2 个答案: