今天将得意的功能上线,结果当打开页面的时候就出现了下面的错误:
request is No 'Access-Control-Allow-Origin' header is present on the requested resource.'
大家很熟悉出现了跨域问题,那么咱们先来聊聊什么是跨域,为什么叫跨域!
1.跨域问题
浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.
针对于我上面的情况是这样的,html静态文件不是放在我的服务器上,而是放在了cdn上,那么就导致了cdn的域名和我后台方法的域名不相同了。
2.什么是同域
简单的解释就是相同域名,端口相同,协议相同。域名:比如程序员经常配的localhost,这就是域名
具体可以参考:http://blog.csdn.net/lambert310/article/details/51683775
3.解决跨域问题的办法
具体有8种办法解决跨域问题参考:http://blog.csdn.net/joyhen/article/details/21631833
我觉得的办法就是采用jsonp,jsonp可以解决跨域的js文件,也可以解决跨域请求后台方法。
如果请求后台只有请求输入参数,而没有响应返回则只需要写格式为jsonp即可。(我这里使用的jquery 的ajax访问,jquery已经封装好了jsonp,具体可以参考jquery文档),如果有返回则需要写返回函数的名称。具体如下例子(网上摘取 请求百度地图api的)
//获取用户当前坐标
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);
}
}
});
}