使用 D3 从外部网站加载大型 json 文件

Question

在我的网站“mywebsite.com”上，我有一个 D3 javascript 代码在位于“otherwebsite.com/data.json”的一些数据集上运行，所以我天真地尝试了

d3.json("otherwebsite.com/data.json", function(error, json) {
if (!error) {

    console.log('done loading',json)
} else {
    console.log(error)
}
})

但当然它不起作用:)

Access to XMLHttpRequest at 'otherwebsite/data.json' from origin 'https://mywebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

有人有更好的主意吗？ 我应该强调它是一个大文件（200MB）。

谢谢

Answer 1

取自CORS 上的 MDN 页面：

出于安全原因，浏览器限制从脚本发起的跨域 HTTP 请求。 例如，XMLHttpRequest 和Fetch API遵循同源策略。 这意味着使用这些 API 的 web 应用程序只能从加载应用程序的同一来源请求资源，除非来自其他来源的响应包含正确的 CORS 标头。

The CORS header in question is Access-Control-Allow-Origin which needs to either be explicitly set to https://mywebsite.com or be set to something that includes that, such as * .

如果您有权访问“otherwebsite.com”的服务器，则可以更改随请求发送的 header。

否则，您可能必须在“mywebsite.com”上下载数据服务器端，然后让前端从后端请求它，而不是发出跨源请求，因此您将 JS 更改为如下所示：

d3.json("/data.json", function(error, json) {...