跨域XMLHTTPRequest错误
我正在尝试通过 jQuery get 方法加载 XML 数据。 XML 源位于以下 URL: http://webservices.nextbus.com/service/publicXMLFeed?command=routeList& ;a=mbta
当我在浏览器中运行以下代码时,出现错误:
XMLHttpRequest 无法加载 http://webservices.nextbus.com/service/publicXMLFeed?command=routeList& ;a=mbta。 来源 http://173.203.89.156 不是 允许的 访问控制允许来源。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Bus Map</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
var myLatlng = new google.maps.LatLng(42.3966499, -71.12188);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$.get('http://webservices.nextbus.com/service/publicXMLFeed?command=routeList&a=mbta', function(stops) {
alert(stops[0]);
})
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</body>
</html>
该域是否明确阻止所有跨域 XMLHTTPRequest,或者是否有办法绕过此错误?
I'm trying to load XML data via the jQuery get method. The XML feed is located at the following URL:
http://webservices.nextbus.com/service/publicXMLFeed?command=routeList&a=mbta
When I run the following code in the browser, I get an error:
XMLHttpRequest cannot load
http://webservices.nextbus.com/service/publicXMLFeed?command=routeList&a=mbta.
Origin http://173.203.89.156 is not
allowed by
Access-Control-Allow-Origin.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Bus Map</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
var myLatlng = new google.maps.LatLng(42.3966499, -71.12188);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$.get('http://webservices.nextbus.com/service/publicXMLFeed?command=routeList&a=mbta', function(stops) {
alert(stops[0]);
})
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</body>
</html>
Is this domain categorically blocking all cross-domain XMLHTTPRequests, or is there away to bypass this error?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
浏览器阻止跨域 xhr。对于 xhrs,您需要遵循同源策略,或者您需要使用替代方案,例如服务器端代理或 jsonp(如果应用程序提供)。
the browser blocks cross domain xhrs. There is something called the Same-Origin-Policy you need to follow for xhrs, or you need to use an alternative, like server side proxying or jsonp if it is provided by the application.
如果您需要解决同域问题(就像许多 API 所做的那样),请研究 JSONP。我对 jQuery 不太熟悉,但如果URL 有一个回调参数。
If you need to get around the same-domain issue (like many APIs do), look into JSONP. I'm not that familiar with jQuery, but it appears to make JSONP calls with getJSON if the URL has a callback parameter.