使用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. css

這是因爲Ajax是經過XMLHttpRequest對象進行異步數據交互,而瀏覽器出於安全方面的考慮,不容許js進行跨域操做。html

跨域訪問分爲本域和子域的相互訪問(http://www.aaa.com和http://sub.aaa.com)以及本域和其它域的相互訪問(http://www.aaa.com和http://www.bbb.com),當前問題是本域和子域之間的相互訪問。ajax

解決跨域訪問問題,有好幾種方法,具體可參考這篇博客:http://www.cnblogs.com/hyl8218/archive/2010/03/12/1683265.htmljson

另外,還能夠使用jsonp的方法來解決。具體方法以下:跨域

在頁面中發送Ajax異步請求時,使用以下格式的方法:瀏覽器

 $.ajax({
                type: "post",
                url: "/user/passport/popup_login",
                data: { mail: loginName, pwd: loginPwd, remember: true, callback: "?" },
                dataType: "jsonp",
                success: function (data) {
                    if (data.isError=="true") {
                      location.href = location.href;
                    }
                    else {
                        alert(data.msg);
                        $("#log").css({
                            "disabled": ""
                        }).removeClass("wait_log");
                    }
                },
                beforeSend: function () {
                    $("#log").css({
                        "disabled": "disabled"
                  }).addClass("wait_log");
                }
            });

處理該請求的action以下:安全

 public ActionResult popup_login(string callback, string mail, string pwd, bool remember){
     var jsonp = "isError:'{0}',msg:'{1}',href:'{2}',uname:'{3}',uid:'{4}'";

            ///*進行登陸處理,並獲得處理結果*/

     var userName = (CurrUser ?? ul).USER_NAME;
     var userId = (CurrUser ?? ul).USER_ID;
     jsonp = string.Format(jsonp, "true", "登陸成功", "", userName, userId);
     return Content(callback + "({" + jsonp + "})");
}

在Ajax請求時,若是沒有特別指定jsonp的變量名,那麼它默認就是爲「callback」,請求參數的名稱也必須爲「callback」;若是有指定變量名,就以指定的名稱爲準。mvc

更多關於jsonp的使用請參考博客:http://justcoding.iteye.com/blog/1366102異步

相關文章
相關標籤/搜索