通过 Chrome 中的 Fetch API 在 D3 v5 中加载 JSON？答案

【问题标题】：Loading JSON in D3 v5 via Fetch API in Chrome?通过 Chrome 中的 Fetch API 在 D3 v5 中加载 JSON？
【发布时间】：2019-01-07 05:05:35
【问题描述】：

在 Chrome 中运行以下代码时，d3.json 回调不会触发，直到 pubs.json 加载到另一个浏览器选项卡/窗口中。当d3.json 粘贴到 Chrome 浏览器控制台时它可以工作，如果在 Firefox 中运行它也可以工作......

我在 localhost 上使用 Python 的 http.server。

为什么它在 Chrome 中会这样？

目录结构：

proj/
  index.html
  pubs.json

代码：

<html>
  ...
  <body>
    ...
    <script>
        $(document).ready(function(){
            d3.json("/pubs.json").then(function(data) {
                console.log(data);
            });
        });
    </script>
  </body>
</html>

【问题讨论】：

“直到pubs.json 加载到另一个浏览器选项卡/窗口”是什么意思？您有重现问题的链接吗？
脚本标签应该在正文标签内。这只是重写这篇文章时的错字吗？
我知道这可能是一个愚蠢的问题，但是您是否检查过您是否正在运行适当的服务器来测试该代码？ Javascript 在没有适当权限的情况下通常有一些限制，虽然 firefox 和 safari 可以让您在一定程度上规避这一点，但 chrome 不会。
@ManuelAlejandroCaetano 可能不是“正确的”。我正在使用 Python 的http.server。以为我以前从未遇到过这个问题。
@PierreCapo 我的意思是——据我所知——承诺在加载页面时等待处理。然后，如果在另一个浏览器选项卡/窗口中，我加载 <host>/pubs.json 承诺在原始选项卡/窗口中实现。

标签： javascript d3.js fetch es6-promise

【解决方案1】：

Chrome 对 CORS (Same Origin) 很迂腐

尝试以下方法：

d3.json(chartURL, {credentials: 'same-origin'}).then(function(data) {
    ....
});

如果文件是由另一个选项卡加载的，它可以在缓存中找到，那么要求可能不再那么严格了。

【讨论】：