XMLHttpRequest无法加载https://opensky-network.org/api/states/all。 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此,不允许原点'null'访问。
从api中检索数据时出现以下错误:
<script>
$.get('https://opensky-network.org/api/states/all', function(data) {
console.log(data);
});
</script>
在头脑中我有这个:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
整个代码如下所示:
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 15,
styles:
[{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var image = {
url: 'icon.png',
size: new google.maps.Size(80, 80),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(50, 50)
};
var marker = new google.maps.Marker({
position: pos,
animation: google.maps.Animation.DROP,
map: map,
icon: image,
});
infoWindow.setPosition(pos);
infoWindow.setContent('U bevindt zich hier.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
<script>
$.get('https://opensky-network.org/api/states/all', function(data) {
console.log(data);
});
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCX-164-aso7Qtue97g_6kGdKVKkwN4SE&callback=initMap">
</script>
</body>
</html>
答案 0 :(得分:1)
由于您的网页使用XMLHttpRequest对象从远程服务器发送和接收数据,因此您的脚本受same origin policy的约束。
因此,浏览器会阻止您的请求,因为脚本使其位于与服务器不同的域中。这是出于安全原因。
当您想要执行跨域请求时,您需要做一些不同的事情。 其中一个&#34;清洁&#34;方法是在您的API级别enable CORS。
我很快就看到&#34; opensky-network&#34; API我注意到Java和Phyton的说明,但没有JavaScript的说明(同源策略适用于浏览器中的JS)。我建议你联系他们,询问他们是否有一些选项来启用CORS。
如果没有,替代方案是JSONP(如果他们允许)或PROXY,您可以自己构建并使用正确的标头返回API数据,这可以启用CORS通信。
答案 1 :(得分:-1)
这个错误因为api不允许任何人请求数据。您必须在请求时发送一些标头权限参数