D3js 导入本地json文件产生跨域问题？

使用D3.js。在使用d3.json('relation.json',function)方法时，浏览器报d3.v3.min.js:1 Access to XMLHttpRequest at 'file:///C:/Users/Administrator/Desktop/d3/relation.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.我的json文件是本地的，请问如何解决。谢谢

这个问题是因为浏览器的安全策略所致。浏览器将该请求拦截并报错，是因为当前网页的域名和请求的文件域名不一样，浏览器不允许这种跨域请求。

解决方法是将 JSON 文件放到 HTTP 服务中，本地文件路径不能直接使用 file:///XXXX 这种方式获取。可以使用 HTTP 服务访问本地静态文件，具体方法如下：

  1. 安装 HTTP 服务器

首先我们需要安装 HTTP 服务器，可以使用一些开源的工具，如 Node.js、Nginx、Apache 等。这里我以 Node.js 为例进行讲解。

  1. 启动 HTTP 服务器

在命令行中输入以下命令启动 HTTP 服务器：

$ cd /path/to/root/dir/
$ npm install -g http-server
$ http-server

其中，/path/to/root/dir/ 为文件所在目录的绝对路径，你也可以将该命令执行目录切换为文件根目录下，直接使用 http-server 启动。

执行后，会输出以下信息：

Starting up http-server, serving ./
Available on:
 http://192.168.0.100:8080
 http://127.0.0.1:8080
Hit CTRL-C to stop the server

可以看到，文件服务启动成功，现在可以通过 http://127.0.0.1:8080/relation.json 访问到 relation.json 文件。

  1. 修改 D3 代码

在代码中修改 d3.json 操作的 URL 地址，改为 http://localhost:8080/relation.json 的形式（localhost 需要与启动 HTTP 服务器时输出的 IP 地址一致），即可读取到 json 文件。如下所示：

d3.json('http://localhost:8080/relation.json', function(data) {
    // do something with the data
});

这样，就能够在本地使用 D3.js 访问 JSON 文件了。