传统Webform 跨域调用 MVC 4 Web API实现分布式 无法解析 解决方案

前言：

---

正好在大概7月1日学习一份kendo ui的资料时发现一共5个章节，前3个章节都是用来讲Web API了，既然都已经看了索性就尝试一下，也不做深层次了解了，于是查阅了一些资料尝试写一个基于MVC 4 的WebAPI Demo。

正文：

---

 
下文简略介绍服务端的部分实现：

创建一个MVC4 基本项目，也就是不需要自己创建一些基本的注册绑定了。

直接新建一个Controller以及一个Model，如下所示：

 UserModel.cs

1     public class UserModel
2     {
3         public string UserID { get; set; }
4         public string UserName { get; set; }
5         public string UserPwd { get; set; }
6     }

 

 
UserController

1 public class UserController : ApiController
2     {
3         public UserModel getUser()
4         {
5             return new UserModel { UserID="1000",UserName="Admin",UserPwd="Admin888"};
6         }
7     }

 

查看一些App_Start 下WebAPI的路由设置如下：

1         public static void Register(HttpConfiguration config)
2         {
3             config.Routes.MapHttpRoute(
4                 name: "DefaultApi",
5                 routeTemplate: "api/{controller}/{id}",
6                 defaults: new { id = RouteParameter.Optional }
7             );
8         }

此时，直接访问api/User/getUser

即可得到以下结果：


可以看到结果是一个xml文档。
直接在本页面创建一个index.html页面，使用ajax以json数据形式调用这个api，实现如下：

        $(function () {
            $.ajax({
                type: 'GET',
                url: 'api/user/getadmin',
                dataType: 'json',
                success: function (data, textStatus) {
                    alert("用户ID："+data.UserID + " , 用户名：" + data.UserName+" , 用户密码："+data.UserPwd);
                },
                error: function (xmlHttpRequest, textStatus, errorThrown) {
                }
            });
        })

 

实现效果如下：


这属于在一个项目中调用数据，也就并提不上什么分布式了，另外新建一个webform项目，同样创建一个index.html页面，以同样的方式调用这一api，区别在于需要写上域名和主机头以及协议：

        $(function () {
            $("#btnGet").click(function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://localhost:16564/api/user/getUser',
                    dataType: 'json',
                    success: function (data, textStatus) {
                        alert("用户ID：" + data.UserID + " , 用户名：" + data.UserName + " , 用户密码：" + data.UserPwd);
                    },
                    error: function (xmlHttpRequest, textStatus, errorThrown) {
                    }
                });
            });
        })

 

 可以看到单击后并无任何效果。

打开chrome开发人员工具，查看网络请求可以看到，请求的api/user/getUser   状态是cancel，这应该是JS不允许跨域调用的结果，如下图所示：

 

通过分析以下错误信息：No 'Access-Control-Allow-Origin' header is present on the requested resource.  查看后发现确实如此，OK，解决方案随之产生，直接将dataType 从json 改为JSONP即可。

            $("#btnGet").click(function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://localhost:16564/api/user/getUser',
                    dataType: 'JSONP',
                    success: function (data, textStatus) {
                        alert("用户ID：" + data.UserID + " , 用户名：" + data.UserName + " , 用户密码：" + data.UserPwd);
                    },
                    error: function (xmlHttpRequest, textStatus, errorThrown) {
                    }
                });
            }); 

 

此时刷新后再次访问仍然无响应，再次查看，结果如下：
 

得到的返回结果是：{"UserID":"1000","UserName":"Echo","UserPwd":"EchoIsnotLoser"}
如果想用JSONP来获得跨域的数据，需求的格式是
jQuery123456([{'UserID':'1000'}])
而WebAPI本身是不支持JS的callback的，它返回的JSON是这样的：
{"UserID":"1000","UserName":"Echo","UserPwd":"EchoIsnotLoser"}

故而无法解析。

 找到原因后只需要在WebAPI这个服务端写一个拓展类，并在全局注册即可：
1.创建一个JsonCallbackAttribute    判断接口的访问是属于跨域，还是非跨域，正常的返回。
 

    public class JsonCallbackAttribute : ActionFilterAttribute
    {
        private const string CallbackQueryParameter = "callback";
 
        public override void OnActionExecuted(HttpActionExecutedContext context)
        {
            var callback = string.Empty;
 
            if (IsJsonp(out callback))
            {
                var jsonBuilder = new StringBuilder(callback);
 
                jsonBuilder.AppendFormat("({0})", context.Response.Content.ReadAsStringAsync().Result);
 
                context.Response.Content = new StringContent(jsonBuilder.ToString());
            }
 
            base.OnActionExecuted(context);
        }
 
        private bool IsJsonp(out string callback)
        {
            callback = System.Web.HttpContext.Current.Request.QueryString[CallbackQueryParameter];
 
            return !string.IsNullOrEmpty(callback);
        }
    }

 

2.在全局注册这个扩张类

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
 
            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
 
            GlobalConfiguration.Configuration.Filters.Add(new JsonCallbackAttribute());
        } 

 

此时 重新编译整个项目，再次运行即可查看到需要的效果，如下图所示：

 

至此在传统Webform中调用WebAPI的基本操作就实现了。

转载于:https://www.cnblogs.com/ecoder/p/4619881.html