尝试从 D3 中的同一文件夹加载本地 .json 文件（并将其记录到控制台），但控制台中有两个错误：
d3.v5.js:5908 Fetch API 无法加载 [buildings.json - 文件]。对于 CORS 请求，URL 方案必须是“http”或“https”。json@d3.v5.js:5908（匿名）@index.html:10
d3.v5.js:5908 Uncaught (in promise) TypeError: Failed to fetch at Object.json (d3.v5.js:5908) at index.html:10 json @ d3.v5.js:5908 (anonymous) @ index .html:10 Promise.then（异步）（匿名）@ index.html:10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v5.js"></script>
</head>
<body>
<script>
d3.json("buildings.json").then(data => console.log(data))
</script>
</body>
</html>有没有人看到原因并有解决方案？
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 帖子中描述的相同问题。
您面临跨源资源共享的问题，这是浏览器的一项安全功能。
有两个选项可以避免这种情况：
使用网络服务器。要为静态 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 \development”
参数 --disable-web-security --user-data-dir 是这里的重要部分。
注意：仅将其用于开发。您可以通过此方式允许您访问的所有网站进行跨源请求。
| 归档时间： |
|
| 查看次数： |
9500 次 |
| 最近记录： |