2013-03-17 25 views
3

当我运行下面的代码:Access-Control-Allow-Origin不允许Origin null。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>D3 Demo: GeoJSON</title> 
     <script type="text/javascript" src="http://localhost/webserver/d3/d3.js"></script> 
     <style type="text/css"> 
      /* No style rules here yet */  
     </style> 
    </head> 
    <body> 
     <script type="text/javascript"> 

      //Width and height 
      var w = 500; 
      var h = 300; 

      //Define default path generator 
      var path = d3.geo.path(); 

      //Create SVG element 
      var svg = d3.select("body") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h); 

      //Load in GeoJSON data 
      d3.json("http://localhost/webserver/us-states.json", function(json) { 

       //Bind data and create one path per GeoJSON feature 
       svg.selectAll("path") 
        .data(json.features) 
        .enter() 
        .append("path") 
        .attr("d", path); 

      }); 

     </script> 
    </body> 
</html> 

我得到以下错误:

XMLHttpRequest cannot load http://localhost/webserver/us-states.json. Origin null is not allowed by Access-Control-Allow-Origin. 

这是怎么回事错在这里,我如何解决呢? 我正在关注Scott Murray的书,直到我开始使用json时,我在web服务器上访问文件时都没有问题。

+0

我自己找到了解决方案。 Chrome中的--disable-web-security为我完成了这项工作。 – csnake 2013-03-17 17:06:47

+1

这不是一个长期的解决方案 - 更好地查看CORS并发送正确的访问控制允许起始标题 – imrane 2013-03-17 22:50:38

+0

您对这个imrane有什么意义? – csnake 2013-03-19 19:01:44

回答

1

出于安全原因,浏览器从不同的主机(起点)块的Ajax的HTTP请求(XHR)。

d3.json("...")函数向您的http://localhost/发出Ajax请求...并且您可能正在从不同的主机提供HTML。

你打开的.html文件作为在浏览器?这被认为是一个不同的主机。你有一些选项有:

  • 从网页服务器服务您的HTML文件,你所服务的JSON文件
  • 将您上传.json到.js添加类似var mygeodata = {your json here}的文件,并在加入<script type="text/javascript" src="http://localhost/webserver/us-states.js"></script> HTML <head>,同时还删除了d3.json("...")部分。之后,你有mygeodata
  • 与您的数据的全局变量配置Web服务器允许CORS。

如果你正在学习/原型(通过它的外观),我会采用第二种方法。

+0

脚本打开的.html文件作为在浏览器和加载文件通过本地主机是我的原因遇到了这个问题。使用localhost打开html页面解决了这个问题。 – user3613932 2017-07-05 04:28:16

相关问题