D3 Json 请求获取 XmlHttpRequest 错误：Access-Control-Allow-Origin 不允许 Origin null答案

【问题标题】：D3 Json request getting XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-OriginD3 Json 请求获取 XmlHttpRequest 错误：Access-Control-Allow-Origin 不允许 Origin null
【发布时间】：2012-07-23 23:30:24
【问题描述】：

我正在使用 d3.json() 请求一个 json 对象并对其进行解析/可视化...

它是从 java servlet doGet 函数请求的...我知道我的 java 服务器已成功将 json 发送到浏览器。但是，我在尝试解析 json 时遇到了问题。 d3.json 应该做一个 http get 请求，但由于某种原因，它返回一个 XML 请求错误：

XMLHttpRequest 无法加载“http://localhost:8080/cluster”。 Access-Control-Allow-Origin 不允许 Origin null。

我应该知道一些关于 d3.json 的进一步设置，还是应该开箱即用？这是我的代码..

    d3.json("http://localhost:8080/cluster", function(json) {       

            //do visualization
            var node = vis.data([json]).selectAll("g.node")
             .data(pack.nodes)
             .enter().append("g")
             .attr("class", function(d) {return d.children ? "node" : "leaf node" ;})
             .attr("transform", function(d) {return "translate(" + d.x + "," + d.y +")"; });

            node.append("title")
                .text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });



            node.append("circle")
            .attr("r", function(d) { return d.r; });

            node.filter(function(d) { return !d.children; }).append("text")
            .attr("text-anchor", "middle")
            .attr("dy", ".3em")
            .text(function(d) { return d.name.substring(0, d.r / 3); });
    }

我在这里做错了吗？我主要是因为 d3.json 应该做一个 HTTP get 默认情况下，但它返回一个 XMLHTTPrequest 错误...

【问题讨论】：

它与D3无关，如果不允许访问，您向另一个域发出的任何XMLHTTPRequest都会抛出此错误。您如何加载包含此代码的页面？
我明白了……我该如何允许跨组织资源共享？这是应该在 javascript 或我的码头服务器中设置的吗？
您的服务器必须设置适当的 HTTP 标头。见en.wikipedia.org/wiki/Cross-origin_resource_sharing。但是如果服务器也在为这个页面提供服务，那么你应该这样做。

标签： javascript html xml http d3.js

【解决方案1】：

如果您使用文件协议 (file:///) 加载 HTML 文件，那么您将遇到此问题。尝试也使用 localhost 加载 html 文件，这应该可以解决问题。

【讨论】：