Question

尝试从D3中的同一文件夹加载本地.json文件（并将其记录到控制台），但是控制台中存在两个错误：

d3.v5.js：5908提取API无法加载   [buildings.json-文件]。 URL方案必须为   “ http”或“ https”用于CORS请求。 json @ d3.v5.js：5908（匿名）@   index.html：10

d3.v5.js：5908未捕获（承诺）TypeError：未能   取       在Object.json（d3.v5.js：5908）       在index.html：10 json @ d3.v5.js：5908（匿名）@ index.html：10 Promise.then（异步）（匿名）@ index.html：10

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="creative[placement_creative_attributes][site_placment_id]" placeholder="creative[placement_creative_attributes][site_placment_id]" /><br />

<input name="creative[placement_creative_attributes][site_id]" placeholder="creative[placement_creative_attributes][site_id]" /><br />

<input name="creative[site_id]" placeholder="creative[site_id]" /><br />

<button>Remove placement_creative_attributes</button>

有人看到原因并找到解决方案吗？

Answer 1

d3.json使用fetch。

export default function(input, init) {
  return fetch(input, init).then(responseJson);
}

https://github.com/d3/d3-fetch/blob/master/src/json.js

因此，您正在处理这些SO帖子中描述的相同问题。

Importing local json file using d3.json does not work
"Cross origin requests are only supported for HTTP." error when loading a local file
Fetch API cannot load file:///C:/Users/woshi/Desktop/P5/p5/JSON/birds.json. URL scheme must be "http" or "https" for CORS request

您面临跨源资源共享的问题，这是浏览器的一项安全功能。

两个选择两个可以避免这种情况：



使用网络服务器。只需为您的静态html / js文件运行一个简单的网络服务器，就可以使用npm http-server（https://www.npmjs.com/package/http-server）之类的东西



更改chrome启动参数，并告知您要忽略此安全功能。您可以通过更改启动配置来实现此目的，例如



“ C：\ Program Files（x86）\ Google \ Chrome \ Application \ chrome.exe” --disable-web-security --user-data-dir =“％LOCALAPPDATA％\ Google \ Chrome \ User Data \开发”

参数--disable-web-security --user-data-dir在这里很重要。

注意：只需将其用于开发即可。这样，您就可以对您访问的所有网站进行跨源请求。

Answer 2

How to launch html using Chrome at "--allow-file-access-from-files" mode?中提到的另一种可能性是使用浏览器扩展程序，例如Web Server for Chrome

如何在D3中正确加载本地JSON？

2 个答案: