javascript - D3.js JSON解析错误

Question

使用d3.json(obj, function(error, root)解析内联JSON对象时，当我在本地运行它时它工作正常，但是当我在tomcat服务器上运行时我出现 XMLHttpparse 错误。我在互联网上搜索。我找到的答案是 CORS。但不清楚如何实现这一点。您能帮助我吗？

var obj = {
 "name": "vis",
 "children": [
  {
   "name": "Votes",
   "children": [
    {"name": "200", "size": 200,"url":"1"},
    {"name": "500", "size": 500,"url":"2"},
    {"name": "300", "size": 300,"url":"3"},
    {"name": "400", "size": 400,"url":"4"}
   ]
  },  
  {
   "name": "Reputation", 
   "children": [
    {"name": "200", "size": 200},
    {"name": "500", "size": 500},
    {"name": "300", "size": 300},
    {"name": "400", "size": 400}
   ]
  },
  {
   "name": "Accepted Answer",
   "children": [    
    {
     "name": "encoder",
     "children": [
      {"name": "Accepted Answer", "size": 500}
     ]
    }
   ]
  }
 ]
};
d3.json(obj, function(error, root) {
    alert('error '+error);
    alert('root: '+root);
  if (error) return console.log(error);
}

Answer 1

首先，确保您将 URL 作为第一个参数传递给 d3.json()。

其次，需要配置Tomcat以支持CORS。在版本 7.0.41+ 中，Tomcat 包含 CORS 过滤器。将过滤器添加到您的 web.xml 文件中。

这是您需要的最低配置:

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

有关更多信息和其他配置选项，请参阅文档:http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter

这是一个 flowchart此过滤器的请求处理过程可以帮助您设置任何其他参数: