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);
			}
}
});
	
}

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

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 😃 https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: "./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...