2013-03-17 63 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

相關問題