ajax跨域报错

在项目中使用ajax访问百度地图的api时，报

post request is No 'Access-Control-Allow-Origin' header is present on the requested resource.'

为什么会出这样的错误呢？这是因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释：

　　同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。

　　这就是引起为何取不到数据的原因了，那如何才能解决跨域的问题呢？

这里就使用到了jsonp

具体实现

//获取用户当前坐标
function findUserLocation(){
	var resUrl = "http://api.map.baidu.com/location/ip?ak=dKkDYZr7Mprkruw9BTlIw9d8&coor=bd09ll";
	$.ajax({
        type : "get", //jquey是不支持post方式跨域的
        async:false,
        url : resUrl, //跨域请求的URL
        dataType : "jsonp",
        //传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)
        jsonp: "callback",
		beforeSend :function(msg){
			$("#showmsg").html("正在查询您的绑定信息……");
		},
        //成功获取跨域服务器上的json数据后,会动态执行这个callback函数
        success : function(msg){ 
            var jsonObj = eval(msg);
			if(0 == jsonObj.status){
				var contentJson = eval(jsonObj.content);
				var pointJson = eval(contentJson.point);
				$("#userLat").val(pointJson.y);
				$("#userLng").val(pointJson.x);
				//提交表单
				$("#subform").attr("action","/uxunwxweb/base/gotopage.do?gotolink=ATMMap");
				$("#subform").submit();
			}else{
				$("#showmsg").html("请求坐标出错，当前状态码为"+jsonObj.status);
			}
        }
    });
	
}

这样既可正确获取到百度返回的参数了。

猜你喜欢