Ajax跨域访问ASP.NET WebApi

ASP.NET WebApi一般用于服务层，会涉及到多端访问。那么就一定会遇到跨域的问题。

我尝试了常见的两种跨域技术Jsonp和Cors，开发工具为VS2017，浏览器是google浏览器，.NET Framework版本为4.5.2

1.建立了两个工程目录，ASP.NET和ASP.NET WebApi，ASP.NET是客户端，WebApi是服务器端

2.在ASP.NET下新建html页面，里面放置了一个表单，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <form id="form1" name="form1">
        <input type="hidden" name="action" value="AddUser" />
        <table>
            <tr>
                <td>
                    用户名：
                </td>
                <td>
                    <input type="text" name="UserName" />
                </td>
            </tr>
            <tr>
                <td>
                    密码：
                </td>
                <td>
                    <input type="password" name="PassWord" />
                </td>
            </tr>
            <tr>
                <td>
                    性别：
                </td>
                <td>
                    <label for="radioMale">男：</label>
                    <input type="radio" id="radioMale" checked="checked" name="Sex" value="male" />
                    <label for="radioFemale">女：</label>
                    <input type="radio" id="radioFemale" name="Sex" value="female" />
                </td>
            </tr>
            <tr>
                <td>
                    出生日期
                </td>
                <td>
                    <select name="Year">
                        <option>1990</option>
                        <option>1991</option>
                        <option>1992</option>
                    </select>
                    <select name="Month">
                        <option>01</option>
                        <option>02</option>
                        <option>03</option>
                    </select>
                    <select name="Day">
                        <option>28</option>
                        <option>29</option>
                        <option>30</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="提交" />
                    <input type="button" value="跨域提交" id="buttonJsonp" />
                    <input type="button" value="跨域提交1" id="buttonCors" />
                </td>
            </tr>
        </table>
    </form>
    <script src="../../Plugins/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">

        var form1 = $("#form1");

        //用Jsonp实现跨域提交，只支持Get请求，支持低版本的浏览器
        form1.find("#buttonJsonp").on('click', function () {
            $.ajax({
                type: "GET",
                dataType: "jsonp",
                url: "http://localhost:4418/api/User",
                data: form1.serialize(),
                jsonpCallback:"cb"
            }).success(function (data) {
                console.log("请求成功1");
                console.log(data);
            }).error(function (data) {
                console.log("请求失败1");
                console.log(data);
            }).complete(function (data) {
                console.log("请求完成1");
                console.log(data);
            });;
        });

        //用Cors实现跨域提交，支持Get，Post
        form1.find("#buttonCors").on('click', function () {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "http://localhost:4418/api/User",
                data: form1.serialize()
            }).success(function (data) {
                console.log("请求成功");
                console.log(data);
            }).error(function (data) {
                console.log("请求失败");
                console.log(data);
            }).complete(function (data) {
                console.log("请求完成");
                console.log(data);
            });
        });

        //同源提交请求
        form1.find(":input[type='submit']").on('click', function () {
            try
            {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "RequestHandler.ashx",
                    data: form1.serialize()
                }).success(function (data) {
                    console.log("请求成功");
                    console.log(data);
                }).error(function (data) {
                    console.log("请求失败");
                    console.log(data);
                }).complete(function (data) {
                    console.log("请求完成");
                    console.log(data);
                });
                console.log(form1.serialize());
            }
            catch(e)
            {
                console.log(e);
            }
            finally
            {
                return false;
            }
            
        });
        
    </script>
</body>
</html>

3.在WebApi中新建一个UserController，分别重写Get和Post方法

        //处理Jsonp的请求
        public IDictionary<string,object> Get(string action, string UserName, string PassWord,
            string Sex,string Year,string Month,string Day)
        {
            Dictionary<string, object> dict = new Dictionary<string, object>();
            dict.Add("stateCode", 1);
            return dict;
        }
        
        //处理Cors的请求
        //public IDictionary<string,object> Post(string action,string UserName,string PassWord,
        //    string Sex,string Year,string Month,string Day)
        public IDictionary<string,object> Post(User user)
        {
            Dictionary<string, object> dict = new Dictionary<string, object>();
            dict.Add("stateCode", 2);
            return dict;
        }

4.在Nuget上安装Cors安装包

然后在WebApiConfig文件下添加如下内容：

        public static void Register(HttpConfiguration config)
        {
            // Web API 配置和服务
            EnableCrossSiteRequests(config);

            // Web API 路由
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }

        /// <summary>
        /// 允许跨域调用
        /// </summary>
        /// <param name="config"></param>
        private static void EnableCrossSiteRequests(HttpConfiguration config)
        {
            //对所有的请求来源没有任何限制
            var cors = new EnableCorsAttribute(
             origins: "*",
             headers: "*",
             methods: "*"
             );
            config.EnableCors(cors);
        }

最后，点击跨域提交和跨域提交1按钮，分别如下显示：

Ajax跨域访问ASP.NET WebApi

猜你喜欢