2013-03-17 2 views
3

Когда я бегу следующий код:Происхождение null не разрешено Access-Control-Allow-Origin.

<!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. 

Что происходит здесь не так и как ее решить? Я следую книге Скотта Мюррея, и у меня не было проблем с доступом к файлам до сих пор на моем веб-сервере, пока я не начал с json.

+0

Нашел решение самостоятельно. --disable-web-security в Chrome сделал для меня работу. – csnake

+1

Это не долгосрочное решение - лучше взглянуть на CORS и отправить правильное управление доступом, разрешить исходный заголовок – imrane

+0

Что вы имеете в виду с этим imrane? – csnake

ответ

1

Из соображений безопасности браузеры блокируют HTTP-запросы Ajax (XHR) с разных хостов (происхождение).

Функция d3.json("...") делает запрос Ajax на ваш http://localhost/ ... и вы, вероятно, используете 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
  • Настройте свой веб-сервер, чтобы разрешить CORS.

Если вы изучаете/прототип (по внешнему виду), я бы пошел со вторым подходом.

+0

Открытие файла .html в браузере и загрузка файлов через localhost в сценарий была причиной, по которой я столкнулся с этой проблемой. Открытие html-страницы с помощью localhost решило проблему. – user3613932

Смежные вопросы