通过 Chrome 中的 Fetch API 在 D3 v5 中加载 JSON？
Posted
技术标签:
【中文标题】通过 Chrome 中的 Fetch API 在 D3 v5 中加载 JSON？【英文标题】：Loading JSON in D3 v5 via Fetch API in Chrome? 【发布时间】：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 承诺在原始选项卡/窗口中实现。
【参考方案1】：
Chrome 对 CORS (Same Origin) 很迂腐
尝试以下方法：
d3.json(chartURL, credentials: 'same-origin').then(function(data)
....
);
如果文件是由另一个选项卡加载的，它可以在缓存中找到，那么要求可能不再那么严格了。
【讨论】：
以上是关于通过 Chrome 中的 Fetch API 在 D3 v5 中加载 JSON？的主要内容，如果未能解决你的问题，请参考以下文章
在 Chrome 扩展中使用时，Fetch API 不发送会话 cookie
Chrome iOS 58 中 fetch API 返回的 TypeError
Chrome - Fetch API 无法加载文件。如何解决？