为什么这个 d3.text 请求失败？答案

【问题标题】：Why is this d3.text request failing?为什么这个 d3.text 请求失败？
【发布时间】：2014-01-23 23:40:11
【问题描述】：

我已经坚持了好几个小时了。请帮我找出错误！

为什么这个d3.text 请求失败了？ (link to diff.php)

d3.text("http://q39.qhor.net/cach/diff.php?action=diff", function(diff) {
  document.write(diff); // returns 'null'
});

虽然这有效？ (link to ltcProxy.php)

d3.text("http://freya.syari.net/pool/ltcProxy.php?action=diff", function(diff) {
  document.write(diff); // returns a number read from input
});

我一直在来回阅读documentation，尝试使用不同的输入格式（text/plain、text/html 等......）但我无法让第一个 sn-p 工作。

这有什么问题？

【问题讨论】：

在较新版本的 D3 中，回调的 second 参数是数据——即function(error, diff)。这对你有用吗？
不，但似乎第一个链接的请求花费的时间太长，这就是为什么diff 是null。不知道如何在不损失性能的情况下修复它...
第一个对我来说很快（几乎是瞬间）。

标签： javascript http text d3.js get

【解决方案1】：

如您所见，如果文件请求返回错误，则数据对象 (diff) 将为空。如果您始终使用回调函数的两个参数版本，并且将函数的第一行作为错误检查，您可能会更快地发现它：

d3.text("http://q39.qhor.net/cach/diff.php?action=diff", function(error, diff) {

  if (error) {
      document.write("Error reading file");
      return;
  }

  document.write(diff); // returns 'null'
});

d3 传入的“错误”对象除了检查它的存在之外并没有多大用处——它是使用的 XMLHTTPRequest 函数，而不是返回的错误。错误本身应由浏览器记录到您的控制台。

为什么直接打开文件没问题，文件请求返回错误？因为 Javascript 在使用外部文件时非常有礼貌：只有在服务器包含表明您的网页可能使用它们的标头时才会使用它们。

具体来说，当您尝试运行该请求时，应该在控制台上显示的错误消息类似于

XMLHttpRequest 无法加载 http://q39.qhor.net/cach/diff.php?action=diff。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://fiddle.jshell.net' 不允许访问。

换句话说，您不能在脚本中使用其他人的文件，除非它明确告诉您的浏览器您有权使用它。您在第二个示例中使用的代理服务器正在为您获取文件，然后将其传递给浏览器，并指示http://syari.net 域中的任何网站都可以使用该文件。但是，如果我尝试使用 JS fiddle 中的该文件名，我仍然会收到错误消息：

XMLHttpRequest 无法加载 http://freya.syari.net/pool/ltcProxy.php?action=diff。 “Access-Control-Allow-Origin”仅将“http://syari.net”列入白名单。来源“http://fiddle.jshell.net”不在列表中，因此不允许访问。

有关访问控制和 HTTP 请求的更多信息： https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

【讨论】：