Access-Control-Allow-Origin不允许使用Origin null. [英] Origin null is not allowed by 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.
这里出了什么问题，我该如何解决? 我一直在关注Scott Murray的书，到目前为止，在开始使用json之前，访问网络服务器上的文件一直没有问题.
What is going wrong here and how do I solve it? I am following the book of Scott Murray and I didn't have problems to access files so far on my webserver until I started with json.
推荐答案
出于安全原因，浏览器会阻止来自不同主机(来源)的Ajax HTTP请求(XHR).
For security reasons, browsers blocks Ajax HTTP requests (XHR) from different hosts (origins).
d3.json("...")函数向您的 http://localhost/发出Ajax请求...从其他主机提供HTML.
The d3.json("...") function makes an Ajax request to your http://localhost/... and you are probably serving the HTML from a different host.
是否要在浏览器中以文件形式打开.html?那被认为是另一台主机.您有一些选择:
Are you opening the .html as file in the browser? Thats considered a different host. You have some options there:
- 从与您提供json文件相同的Web服务器提供HTML文件
- 将您的.json转换为.js，将类似
var mygeodata = {your json here}的内容添加到文件中，并在HTML<head>中添加<script type="text/javascript" src="http://localhost/webserver/us-states.js"></script>，同时还删除d3.json("...")部分.之后，在mygeodata中有一个带有数据的全局变量
- 配置您的Web服务器以允许CORS.
- Serve your HTML file from the same web server you are serving the json file
- Convert your .json into a .js adding something like
var mygeodata = {your json here}to the file and adding<script type="text/javascript" src="http://localhost/webserver/us-states.js"></script>in the HTML<head>while also removing thed3.json("...")part. After that you have a global variable with your data inmygeodata - Configure your web server to allow CORS.
如果您正在研究/原型(从外观上看)，我会采用第二种方法.
If you are studying/prototype (by the looks of it) I would go with the second approach.
这篇关于Access-Control-Allow-Origin不允许使用Origin null.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
