使用jsonp解决Ajax跨域访问问题
在最近做的一个mvc2项目中,需要让两个不同域名的项目进行交互。从其中一个项目向另一个项目发出一个Ajax请求,验证登录信息。但使用普通的返回一个JsonResult的方式返回结果时,在浏览器中报如下错误:XMLHttpRequest cannot load ' '. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' ' is therefore not allowed access.
这是由于Ajax是通过XMLHttpRequest对象进行异步数据交互,而浏览器出于安全方面的考虑,不允许js进行跨域操作。
跨域访问分为本域和子域的相互访问(http://www.aaa.com和http://sub.aaa.com)以及本域和其它域的相互访问(http://www.aaa.com和http://www.bbb.com),当前问题是本域和子域之间的相互访问。
解决跨域访问问题,有好几种方法,具体可参考这篇博客:http://www.cnblogs.com/hyl8218/archive/2010/03/12/1683265.html
另外,还可以使用jsonp的方法来解决。具体方法如下:
在页面中发送Ajax异步请求时,使用如下格式的方法:
1 $.ajax({ 2 type: "post", 3 url: "http://www.caidouzi.com/user/passport/popup_login", 4 data: { mail: loginName, pwd: loginPwd, remember: true, callback: "?" }, 5 dataType: "jsonp", 6 success: function (data) { 7 if (data.isError=="true") { 8 location.href = location.href; 9 } 10 else { 11 alert(data.msg); 12 $("#log").css({ 13 "disabled": "" 14 }).removeClass("wait_log"); 15 } 16 }, 17 beforeSend: function () { 18 $("#log").css({ 19 "disabled": "disabled" 20 }).addClass("wait_log"); 21 } 22 });
处理该请求的action如下:
1 public ActionResult popup_login(string callback, string mail, string pwd, bool remember){ 2 var jsonp = "isError:'{0}',msg:'{1}',href:'{2}',uname:'{3}',uid:'{4}'"; 3 4 ///*进行登录处理,并得到处理结果*/ 5 6 var userName = (CurrUser ?? ul).USER_NAME; 7 var userId = (CurrUser ?? ul).USER_ID; 8 jsonp = string.Format(jsonp, "true", "登录成功", "", userName, userId); 9 return Content(callback + "({" + jsonp + "})"); 10 }
在Ajax请求时,如果没有特别指定jsonp的变量名,那么它默认就是为“callback”,请求参数的名称也必须为“callback”;如果有指定变量名,就以指定的名称为准。
更多关于jsonp的使用请参考博客:http://justcoding.iteye.com/blog/1366102

浙公网安备 33010602011771号