d3.js 从 url 获取 JSON答案

【问题标题】：d3.js get JSON from urld3.js 从 url 获取 JSON
【发布时间】：2014-04-15 01:41:25
【问题描述】：

情况是我试图让 d3 读取存储在 Windows Azure Blob 存储中的 JSON 文件。如果我将 url 粘贴到浏览器中，则该文件将下载到我的机器上。我希望能够使用 d3 从 url 获取 JSON 文件，但没有生成图表，这让我相信 d3 无法读取该文件。

这是一个sn-p的代码：

            var url = "http://storageName.blob.core.windows.net/containerName/file.json";

            d3.json("url", function (json) {

             //code here
            })

我已在 Azure 上将容器设置为公开，因此我相信任何拥有该 url 的人都应该可以访问它。有什么建议吗？

【问题讨论】：

我在访问网址时遇到以下错误：One of the request inputs is out of range. RequestId:9bddf99a-7459-4eba-a962-bd85452442d8 Time:2014-03-11T12:56:47.5460693Z 这是正确的网址吗？
不，这不是正确的网址！由于显而易见的原因，我无法在此处分享网址！
您在运行代码时是否收到任何错误消息？
是的 Lars，我收到“XMLHttpRequest 无法加载 storage.blob.core.windows.net/container/file.json。请求的资源上不存在 'Access-Control-Allow-Origin' 标头。因此不允许使用 Origin 'localhost:50332'访问。”

标签： javascript json azure d3.js

【解决方案1】：

应该是：

var url = "http://storageName.blob.core.windows.net/containerName/file.json";
d3.json(url, function (json) {
    //code here
});

【讨论】：

这将违反 CORS。

【解决方案2】：

与 2019 年相关：

d3.json("http://127.0.0.1:8080/mydata.json").then( data => {
    console.log(data);
})

【讨论】：

【解决方案3】：

您必须在您的 blob 上将 Content-Type http 标头设置为“application/json”。

可以通过编程方式或使用其余 API 或使用免费实用程序（如 cloudberry explorer）进行 azure blob 存储。

【讨论】：

感谢您的建议。当您说设置内容类型时，我可以在创建 blob 时在服务器端执行此操作吗？还是必须在客户端执行此操作？
再次感谢您的建议，在完成您提到的操作并将 AllowedOrigins 设置为 * 之后，我现在可以使用 JSON 文件了

【解决方案4】：

对于 REST api，使用 d3.request：

d3.fetch("api_url/path")
.header("Content-Type", "application/json")
.post(function(data) {
   console.log(data);
})

【讨论】：

从 d3 V5 开始，d3.request 已被弃用。请改用 d3.fetch。