使用d3.js加载本地tsv文件出现跨域错误，已启用WAMP

嘿，这个跨域错误我太熟了！浏览器出于安全考虑，禁止直接通过file://协议加载本地数据文件，哪怕是同一个文件夹里的也不行。既然你已经装了WAMP，那解决起来很简单，跟着下面的步骤来：

步骤1：把你的D3项目放到WAMP的网站根目录 #

WAMP默认的网站根目录是C:\wamp\www（64位版本可能是C:\wamp64\www），把你整个d3文件夹复制到这个目录下。最终路径应该是：C:\wamp\www\d3，里面包含index.html和data.tsv。

步骤2：启动WAMP并确认服务正常 #

打开WAMP，等右下角的图标变成绿色（这表示Apache服务器已经正常运行）。如果图标是黄色或者红色，说明服务没启动成功，右键图标检查Apache服务的状态——常见问题是80端口被其他程序（比如IIS、迅雷）占用，可以用WAMP自带的工具检测并更换端口。

步骤3：通过HTTP协议访问你的页面 #

不要再双击打开index.html了，打开浏览器输入：

http://localhost/d3/index.html

这样页面就会通过WAMP的Apache服务器加载，D3就能正常读取同目录下的data.tsv了。

额外检查点 #

• 确保你D3代码里的文件路径是相对路径，比如：

  d3.tsv("data.tsv", function(error, data) {
    // 你的处理逻辑
  });
  

  不要用绝对路径（比如file:///C:/...），相对路径会自动基于当前HTTP页面的路径查找文件。

内容的提问来源于stack exchange，提问作者OiRc